From 3d9ae29c8642433a9e31f19d289ea2b9297884fb Mon Sep 17 00:00:00 2001 From: Stephen Hulme Date: Wed, 8 Nov 2023 15:22:12 +0000 Subject: [PATCH 1/8] feat: change header bar based on more environments --- app/assets/stylesheets/limber/colours.scss | 6 ++ app/assets/stylesheets/limber/screen.scss | 91 +++++++++++++++++----- app/helpers/application_helper.rb | 4 - app/views/application/_header.html.erb | 2 +- app/views/layouts/application.html.erb | 2 +- 5 files changed, 79 insertions(+), 26 deletions(-) diff --git a/app/assets/stylesheets/limber/colours.scss b/app/assets/stylesheets/limber/colours.scss index e852f478c..3fc6edc01 100644 --- a/app/assets/stylesheets/limber/colours.scss +++ b/app/assets/stylesheets/limber/colours.scss @@ -1,3 +1,9 @@ +/* Colours defined per environment */ +$production: $gray-800 !default; +$training: $green !default; +$staging: $red !default; +$development: $gray-100 !default; + @mixin shade-aliquot($base_colour, $text_colour) { &.aliquot, &.pool_name { diff --git a/app/assets/stylesheets/limber/screen.scss b/app/assets/stylesheets/limber/screen.scss index d0b64f0a6..e57d09da6 100644 --- a/app/assets/stylesheets/limber/screen.scss +++ b/app/assets/stylesheets/limber/screen.scss @@ -9,52 +9,103 @@ body { margin-bottom: 50px; } -header.limber-header { +/* Background colours for different environments */ +.bg-production { + background-color: $production; +} +.bg-training { + background-color: $training; +} +.bg-staging { + background-color: $staging; +} +.bg-development { + background-color: $development; +} + +// navbar styles +%navbar-dark-style { nav { - @extend .navbar; - @extend .navbar-expand-md; @extend .navbar-dark; } + .navbar-text { + @extend .text-light; + } } - -#app { - margin-bottom: 100px; +%navbar-light-style { + nav { + @extend .navbar-light; + } + .navbar-text { + @extend .text-dark; + } + @extend .border-bottom; // add border to bottom to increase visibility + border-bottom-color: #eaecef !important; // set border color to match jumbotron background } -#flashes { - @extend .col-12; +// development and unknown environments +header.limber-header { + @extend %navbar-light-style; + nav { + @extend .navbar; + @extend .navbar-expand-md; + @extend .py-3; + @extend .bg-development; + } } -#plate-title, -#tube-title, -.card-header, -#tube-rack-title { - font-weight: 300; +.environment { + @extend .badge; + @extend .badge-light; + @extend .mr-2; } +// Set the background color of the navbar based on the environment .production { header.limber-header { + @extend %navbar-dark-style; nav { - @extend .bg-dark; + @extend .bg-production; } .environment { display: none; } } } -.nonproduction { + +.training { header.limber-header { + @extend %navbar-dark-style; nav { - @extend .bg-danger; + @extend .bg-training; } - .environment { - @extend .badge; - @extend .badge-light; - @extend .mr-2; + } +} + +.staging { + header.limber-header { + @extend %navbar-dark-style; + nav { + @extend .bg-staging; } } } +#app { + margin-bottom: 100px; +} + +#flashes { + @extend .col-12; +} + +#plate-title, +#tube-title, +.card-header, +#tube-rack-title { + font-weight: 300; +} + .tube-list, .plate-list { @extend .list-group; diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb index 1663b324c..f244f7180 100644 --- a/app/helpers/application_helper.rb +++ b/app/helpers/application_helper.rb @@ -27,10 +27,6 @@ def environment Rails.env end - def environment_type_class - Rails.env.production? ? 'production' : 'nonproduction' - end - def each_robot(&block) Robots.each_robot(&block) end diff --git a/app/views/application/_header.html.erb b/app/views/application/_header.html.erb index 65953ac28..441549f80 100644 --- a/app/views/application/_header.html.erb +++ b/app/views/application/_header.html.erb @@ -12,7 +12,7 @@ - + <% if logged_in? %> Currently logged in as, <%= user_name.titlecase %> <%= session_switcher %> <% else %> diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index 665cd180c..278234420 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -25,7 +25,7 @@ - +
<%= render 'header' %> <%= render partial: 'flash_messages' %> From 4e972f63161d756ea2389809418e115e60a0a145 Mon Sep 17 00:00:00 2001 From: Stephen Hulme Date: Thu, 9 Nov 2023 14:13:12 +0000 Subject: [PATCH 2/8] feat: change favicon based on environment --- app/helpers/application_helper.rb | 29 +++++++++++ app/views/layouts/application.html.erb | 3 +- public/apple-touch-icon-development.png | Bin 0 -> 6074 bytes public/apple-touch-icon-staging.png | Bin 0 -> 6152 bytes public/apple-touch-icon-training.png | Bin 0 -> 6125 bytes public/favicon-development.ico | Bin 0 -> 4286 bytes public/favicon-staging.ico | Bin 0 -> 4286 bytes public/favicon-training.ico | Bin 0 -> 4286 bytes spec/helpers/application_helper_spec.rb | 61 ++++++++++++++++++++++++ 9 files changed, 92 insertions(+), 1 deletion(-) create mode 100644 public/apple-touch-icon-development.png create mode 100644 public/apple-touch-icon-staging.png create mode 100644 public/apple-touch-icon-training.png create mode 100644 public/favicon-development.ico create mode 100644 public/favicon-staging.ico create mode 100644 public/favicon-training.ico create mode 100644 spec/helpers/application_helper_spec.rb diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb index f244f7180..e00f68ae0 100644 --- a/app/helpers/application_helper.rb +++ b/app/helpers/application_helper.rb @@ -36,4 +36,33 @@ def pipeline_groups return [] if Settings.pipelines.list.empty? Settings.pipelines.map(&:pipeline_group).uniq.sort end + + # Returns the appropriate icon suffix for the current environment + # Returns empty string for production + # Returns "-#{environment}" for training, staging + # Returns "-development" for any other environment + # @return [String] The suffix to append to the icon name + def icon_suffix + environment = Rails.env + case environment + when 'production' + '' + when 'training', 'staging' + "-#{environment}" + else + '-development' + end + end + + # Return the appropriate favicon for the current environment + # @return [String] The path to the favicon + def favicon + "favicon#{icon_suffix}.ico" + end + + # Return the appropriate apple icon for the current environment + # @return [String] The path to the apple icon + def apple_icon + "apple-icon#{icon_suffix}.png" + end end diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index 278234420..32e685b58 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -21,9 +21,10 @@ <% end %> - + +
diff --git a/public/apple-touch-icon-development.png b/public/apple-touch-icon-development.png new file mode 100644 index 0000000000000000000000000000000000000000..cb7ba65362bbba3b949c015a09efc1de46a5d701 GIT binary patch literal 6074 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 F`v=cyXF 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 literal 0 HcmV?d00001 diff --git a/public/apple-touch-icon-training.png b/public/apple-touch-icon-training.png new file mode 100644 index 0000000000000000000000000000000000000000..5ba98fd52f36d898da9a167303435d5cb728f14e GIT binary patch literal 6125 zcmeHKc~n!^)(=t#P>=!+;1t7Pffq6d5(!AcYy&(%Kos%j=7xlj!6eLx1E56sx-`_x>|$<=%VF+2?om{_Wr1 z$xZY1cGuH2)x}^idY&FGe&Ak>erL@9S615$GPpIy2L!A9pct%NArpuq5v(dsj$n~k zkpP2K2fAobUd+8lc<$IX1`=Bq5Jc1pInEF{8e zW2W`Kd<)$Sx{0%;&w!z6#gIyeZ&7!K>iCAzmDEG8C zZI}7{$}ee`$6KjTH8XuTN_g_2wxNxVtx<5>oqufTyNuW&g*#h-AlESZ#OhYx%&@qy|QHE z=;ciAt$h;#>>|vW!#C_6ZY^4e{byJHx;KlD&Rw-bu&+)_Uw_+69C9MzO#O)j=^wqK z>w_~F1}e5!y6)2ks*4u^bp><3X2LRwEyS1c5ZhRZ9LNrXad3*2L$DZ8VR=ZnNXo(u z*8haViuf#C5RFUZ$~lNoDMAZ)B8QmSOevTzz) zCU{1t2{^3AL?ve7g1Np}j!c1IskT&GBHlGt6ivoC>S7%fd;!zX#cc`#j956KN+o9! z2r)4+wlNf2nIfD(VlWs4BAGxYQ zrGOFFXhfm%RL6-_uFIs%S+kN=VNyVy0xz>3Rdy2#)t^iWS177q27$(O+*K2!5ZrBR7A z8ikLyBiae@RGNT+=kXvi9=50QVH$}+;*;z?fbx_oRge@$P$&RyD*`wqfdCS~3?3e` zr$TtD9gl*C$S?^nfM6J*@F_5zj(h;&qYwdALXjVOg+lQGlz@j&=ypUBp3I}u@KhKk zz(kmAZ^xj}HBe|Cn9jbQEF9UE_~(poB%~6^6cQGW3&B_)|36m(L=wbb z1);2w=nMvpOl1&hR62!BnG8<@7>Fp8KyfH2iD*lqYPR!XrW=5SfO13$ZkrQw}`ldCh-G%8DAub`=6}Q>cKip=G;T11n0+TrY1|uAK5fHnjA)oG_{1q zYN~<>!IL2q?IS1Mo=!S&%?Qn`TwDJ5GKU2y0FP;FPKOgc* z{C=kEGhLs=z$Y1hR@Y~`K8b-(GXAWt|2MjH|9qiBq~LE*40v5?e{2bZSFIVm)$T5u zmoCg0r+y1~(vf?tRbnu+jnJ)L(wkwMue_AvCDSpCWo!M%{MJRua|aQIJW@Q{=)uFPf$zg(3x8#;^e)UCx%T!~rMP{6{WPso z!w8WUmWp9(Yc5l_|K;<X?~+;M)9yavaJPM?S1X&PKyBl@D8c*QPCWBKi{6QvFvO^ z&T&H0_oP|nIfYM_!=b}V)-DPw0mD5lz4JwSgOrHb*TSk^_M5gj3pcAWhCMlw?o#gl zEyd`L#8;wY31ZHZ)!3ZoFd=~K<4=@U>Q4(xDmd#38-y$?;s@6)YSX)yzb>=AZHrK! z-ET&!4r?E>Dy9dm&2C+v^$1(-IOC17W#rU1m!7AafLNF&o^w3PI~Fc#d^u#L84I70 zx+(@+ulAjw&L|rC@^Vv&*?8gK*WC))*ErXPI!X^tJYUk?t%!^qMM2k7_o9cB;M71V-&kFE6Y~-ETf%5Mni$5w%XI ze&)lA;EX6m#lx~FcI;XCP7Q4>dlrca|LPmZ>8wl%^!Umox3@*Vxb}s_BTIW;N|(n( zK#x~9Yg4Xg_ws7*jJ|R60P(eF_f}0W>ii8-sJ*(m#?qe`rgV8$9J?7@f6iuPuoopy z$>}zc*hTn+vG%u@A4S8+s_V8r=G$KSc0=BRA5Xd}0e_rZ&Nh(U8k~BMdY4^_?A3Vd zyqVUs%J;(D(3ZOU46@Vtz2?9rbEBMEc~5D1WVzSV7uIN|2F~uKS-#%=jl(YmN6<{o zPH->NyElS{YIFO<`nYW?ZvI}NN%JAYXyi_oo_>Hqh}pf`180nS;f_N4E9+0Qg@@35 zZ%)rUSsxm|3Z!$zvYLX*9r>r0y9jIMSa>fK-;8;9?d)MxOTQQ_l@g7jkH460)qA&f z9^1w|sxs7XNYE&)sB&r42b5YKJY|ZJbG&h=IG%Gv zg}p+X%WCNv3eC&obG}jQrtx{%>F2^b0&4@0T-~P27MC#YSYDRs)Vp7s7E}Su$Mjc1 z7j1%OmFGUEe2N^AiuGvdH3c=^vrbSh=oi%}=t;i>CxG-VNc$F7&5kyWIQK$=%KlK3 z&k>8z!{i8`0>m&H1Y&mDQKvJXGGOoPEUZa9u(;YV+9>rlD(`IZGa6b^Z|g_UqW#4n z+O4hV5voMP6W}~IzXi7~=8<>i|FI!&1t=A!Nvr+~;)RS=PHdZAgL7^DHbIL^vDJPV zv?!DQU5_tKeBqyM5VAb$>#utnMa8vMHP%P!kE4RF9PtahA4Mu2mMe47Lb4rLQb|ua zW4K!#aVzOz>uiV9!;j5DS#BQKd(!4jMx^|^?P^nDm?r8VjbuNO8&5=rl>&$Y3r4{Js&I&_uDvQCR@zE-o4y2a#_TN zyo+;y6vwJr9TRSwOeqF+OnSq{nJ^I12C1^j4Z}?$E?{H?{ zOtY$|E7!aovFoB=`p4j&@x-=JFgRK#PN4mV~;wm&2Bz%ygz0n zbnJ50;7OzC`gA>+f8id&OTEx}>=i!G$7O91hjeRfQl+Ko1Mx*iy*kHU@VMiOpoZRs pqjUAPsxh;`W$N~Se6BCtqLpFfGT^-vH-!GCd%AkNRIoR0|2MCpZm|FW literal 0 HcmV?d00001 diff --git a/public/favicon-development.ico b/public/favicon-development.ico new file mode 100644 index 0000000000000000000000000000000000000000..5dacd724849498d8f3ba171a071cedf45a1bcebf GIT binary patch literal 4286 zcmZQzU<5)11qKkwutI==L5zWcK?8_^LJST-3=#(epqvml1VaQE81^4M{eKjXhQVkW zz@G*-?b!RDkDvd)x`rkYYZ1ihS$R~?SBgq1|2J;iLv?eBjeA#jum8Ohrw*9?xrHVF zQ!}y$%>L=K7yP%ea~LrDx9vIfUsg_j!0ZR56D@7s|0~vQ9xyiq28aD`Z0#H{`>X1j z{zpW|4Ve9lmaqM9U}QXC_U}D(;=iHp@P`v)ux9GzYNPnefZ0ED%HjX<5pxI3 z{`AB}|0i_s9WeXN^&9^m+;?}t?3Wf!`+xn)$NzF-nFHpA-P>>ew=roQF#Ee&cmB^! zUp8R&M+DCJKY!No0kdC6rTqWt6VC?Beo%dN`NG@(Dl!EF=7u#Z&j0sz=^rrrtIO8^ zuPNIwVD@`C_x)eD>f(UeuPmMa|H{Sp17<%c4LVwO4XFLZw%bP4;cwfIG*5-<<`NtC>rO5EAKT|QVD>kx zDEZ&LzJ9>$4{CM#zvJS@0khvAL+<~rcUS+b$Ky|{#KtE%>drho_TR2dcfi76;eqM@ zvu4B$nEgfbQvc7`)i+@FyH=b0KX&`TfZ4B^DDnT!`)mJoQltmW4F|68`tQ|XIbilr z-q!KIVo~;h*`G2w?EkW(a|g_Rt0K++7oMCNF#AE}){WPf{u^a04wxG@on8GuqRV5z z>~CFN`M-5d)qvR_-s%2-%lS0}X1`&U!vC9ZFAtdgpfu>;YB!+vlT&|>>KVAU(_jpH J*f_vI(EvQ|scirN literal 0 HcmV?d00001 diff --git a/spec/helpers/application_helper_spec.rb b/spec/helpers/application_helper_spec.rb new file mode 100644 index 000000000..c8eecce79 --- /dev/null +++ b/spec/helpers/application_helper_spec.rb @@ -0,0 +1,61 @@ +require './app/helpers/application_helper' + +describe ApplicationHelper do + describe '#favicon' do + subject(:favicon) { helper.favicon } + + it 'returns the favicon path for the production environment' do + allow(Rails).to receive(:env).and_return('production') + expect(favicon).to eq('favicon.ico') + end + + it 'returns the favicon path for the training environment' do + allow(Rails).to receive(:env).and_return('training') + expect(favicon).to eq('favicon-training.ico') + end + + it 'returns the favicon path for the staging environment' do + allow(Rails).to receive(:env).and_return('staging') + expect(favicon).to eq('favicon-staging.ico') + end + + it 'returns the favicon path for the development environment' do + allow(Rails).to receive(:env).and_return('development') + expect(favicon).to eq('favicon-development.ico') + end + + it 'returns the favicon path for an unknown environment' do + allow(Rails).to receive(:env).and_return('unknown') + expect(favicon).to eq('favicon-development.ico') + end + end + + describe '#apple_icon' do + subject(:apple_icon) { helper.apple_icon } + + it 'returns the apple icon path for the production environment' do + allow(Rails).to receive(:env).and_return('production') + expect(apple_icon).to eq('apple-icon.png') + end + + it 'returns the apple icon path for the training environment' do + allow(Rails).to receive(:env).and_return('training') + expect(apple_icon).to eq('apple-icon-training.png') + end + + it 'returns the apple icon path for the staging environment' do + allow(Rails).to receive(:env).and_return('staging') + expect(apple_icon).to eq('apple-icon-staging.png') + end + + it 'returns the apple icon path for the development environment' do + allow(Rails).to receive(:env).and_return('development') + expect(apple_icon).to eq('apple-icon-development.png') + end + + it 'returns the apple icon path for an unknown environment' do + allow(Rails).to receive(:env).and_return('unknown') + expect(apple_icon).to eq('apple-icon-development.png') + end + end +end From a316d3a36ebe60e57ffbbcf1773f1b153154c80c Mon Sep 17 00:00:00 2001 From: Stephen Hulme Date: Thu, 9 Nov 2023 14:31:45 +0000 Subject: [PATCH 3/8] feat: change logout button based on environment and fix formatting --- app/assets/stylesheets/application.scss | 1 + app/assets/stylesheets/limber/icons.scss | 50 +++++++++++++++++++++++ app/assets/stylesheets/limber/screen.scss | 28 +++++++++++++ app/helpers/session_helper.rb | 2 +- app/views/application/_header.html.erb | 9 ++-- 5 files changed, 86 insertions(+), 4 deletions(-) create mode 100644 app/assets/stylesheets/limber/icons.scss diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss index 956fd4b79..313f6fba9 100644 --- a/app/assets/stylesheets/application.scss +++ b/app/assets/stylesheets/application.scss @@ -4,6 +4,7 @@ @import 'limber/_labware-mixins'; @import 'bootstrap'; @import 'limber/screen'; +@import 'limber/icons'; @import 'limber/plate'; @import 'limber/tube'; @import 'limber/tube-rack'; diff --git a/app/assets/stylesheets/limber/icons.scss b/app/assets/stylesheets/limber/icons.scss new file mode 100644 index 000000000..719aa7dc9 --- /dev/null +++ b/app/assets/stylesheets/limber/icons.scss @@ -0,0 +1,50 @@ +// Bare Bones Icon System +// Created by Stephen Hulme, 2023-11-9 + +// Usage: +// +// Where {name} is the name of the icon and {color} is the bootstrap theme color +// (e.g. icon-user-primary, icon-user-secondary, icon-user-success, etc.) + +$icon-size: 24px; + +/// Replace `$search` with `$replace` in `$string` +/// @author Kitty Giraudel +/// @param {String} $string - Initial string +/// @param {String} $search - Substring to replace +/// @param {String} $replace ('') - New value +/// @return {String} - Updated string +@function str-replace($string, $search, $replace: '') { + $index: str-index($string, $search); + + @if $index { + @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace); + } + + @return $string; + } + +@mixin icon($name, $path, $theme-color) { + // split theme color into name and value + $theme-color-name: nth($theme-color, 1); + $theme-color-value: nth($theme-color, 2); + // escape characters for html + $escaped-color: str-replace(inspect($theme-color-value), "#", "%23"); + + .icon-#{$name}-#{$theme-color-name} { + display: inline-block; + width: $icon-size; + height: $icon-size; + background-image: url('data:image/svg+xml, #{$path} '); + background-repeat: no-repeat; + background-position: center; + background-size: $icon-size; + } +} + +// icons list +// (add new icons here) +@each $theme-color in $theme-colors { + // iterate over bootstrap theme colors + @include icon('user', '', $theme-color); +} diff --git a/app/assets/stylesheets/limber/screen.scss b/app/assets/stylesheets/limber/screen.scss index e57d09da6..49857f6ea 100644 --- a/app/assets/stylesheets/limber/screen.scss +++ b/app/assets/stylesheets/limber/screen.scss @@ -31,6 +31,9 @@ body { .navbar-text { @extend .text-light; } + .icon-user { + @extend .icon-user-light; + } } %navbar-light-style { nav { @@ -39,6 +42,13 @@ body { .navbar-text { @extend .text-dark; } + .icon-user { + @extend .icon-user-secondary; + } + .btn-logout { + @extend .btn-light; + @extend .border; + } @extend .border-bottom; // add border to bottom to increase visibility border-bottom-color: #eaecef !important; // set border color to match jumbotron background } @@ -70,6 +80,10 @@ header.limber-header { .environment { display: none; } + .btn-logout { + @extend .btn-danger; + @extend .border-0; + } } } @@ -79,6 +93,10 @@ header.limber-header { nav { @extend .bg-training; } + .btn-logout { + @extend .btn-success; + border-color: darken($training, 5%) !important + } } } @@ -88,6 +106,10 @@ header.limber-header { nav { @extend .bg-staging; } + .btn-logout { + @extend .btn-danger; + border-color: darken($staging, 5%) !important + } } } @@ -173,6 +195,12 @@ nav.robots-list { font-weight: lighter; } +.btn-logout { + @extend .btn; + @extend .btn-secondary; + @extend .rounded; +} + .logged_in { .logged_out_only { display: none; diff --git a/app/helpers/session_helper.rb b/app/helpers/session_helper.rb index cf2e1cb0c..326b0862f 100644 --- a/app/helpers/session_helper.rb +++ b/app/helpers/session_helper.rb @@ -30,6 +30,6 @@ def check_for_login! end def session_switcher - link_to 'Log Out', logout_sessions_path, class: 'btn btn-danger' if logged_in? + link_to 'Log Out', logout_sessions_path, class: 'btn-logout' if logged_in? end end diff --git a/app/views/application/_header.html.erb b/app/views/application/_header.html.erb index 441549f80..1c2a78425 100644 --- a/app/views/application/_header.html.erb +++ b/app/views/application/_header.html.erb @@ -12,11 +12,14 @@
- <% if logged_in? %> - Currently logged in as, <%= user_name.titlecase %> <%= session_switcher %> + + + <%= user_name.titlecase %> + + <%= session_switcher %> <% else %> - Not logged in + Not logged in <% end %>
From cfb71df42fef897bfd5edf3c9844f13baa310404 Mon Sep 17 00:00:00 2001 From: Stephen Hulme Date: Thu, 9 Nov 2023 14:52:44 +0000 Subject: [PATCH 4/8] fix: improve display of environment badge --- app/assets/stylesheets/limber/screen.scss | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/app/assets/stylesheets/limber/screen.scss b/app/assets/stylesheets/limber/screen.scss index 49857f6ea..50b52b652 100644 --- a/app/assets/stylesheets/limber/screen.scss +++ b/app/assets/stylesheets/limber/screen.scss @@ -65,8 +65,17 @@ header.limber-header { } .environment { - @extend .badge; - @extend .badge-light; + // surround in bold square brackets + &:before { + content: '['; + font-weight: bold; + } + &:after { + content: ']'; + font-weight: bold; + } + @extend .navbar-text; + @extend .small; @extend .mr-2; } @@ -193,6 +202,7 @@ nav.robots-list { font-style: oblique; font-stretch: ultra-condensed; font-weight: lighter; + @extend .mr-2; } .btn-logout { From 5834460dfffca1c9ca77273f10cc89629bc7c356 Mon Sep 17 00:00:00 2001 From: Stephen Hulme Date: Thu, 9 Nov 2023 14:54:01 +0000 Subject: [PATCH 5/8] fix: normalise sizes of flash notice --- app/views/application/_flash_messages.html.erb | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/views/application/_flash_messages.html.erb b/app/views/application/_flash_messages.html.erb index 2d02be224..f85ef35aa 100644 --- a/app/views/application/_flash_messages.html.erb +++ b/app/views/application/_flash_messages.html.erb @@ -1,8 +1,8 @@
<% flash.each do |name, message| %>
-

<%= name.titleize %>

-
    <% Array(message).each do |m| %>
  • <%= m %> <% end %>
+ <%= name.titleize %> +
    <% Array(message).each do |m| %>
  • <%= m %> <% end %>
<% end %>
From 65bde5f80f0108709c6fde600a900ac8c8c804ed Mon Sep 17 00:00:00 2001 From: Stephen Hulme Date: Thu, 9 Nov 2023 14:59:50 +0000 Subject: [PATCH 6/8] style: lint --- app/assets/stylesheets/limber/icons.scss | 51 +++++++++++++---------- app/assets/stylesheets/limber/screen.scss | 12 +++--- spec/helpers/application_helper_spec.rb | 6 ++- 3 files changed, 38 insertions(+), 31 deletions(-) diff --git a/app/assets/stylesheets/limber/icons.scss b/app/assets/stylesheets/limber/icons.scss index 719aa7dc9..c0aef06f8 100644 --- a/app/assets/stylesheets/limber/icons.scss +++ b/app/assets/stylesheets/limber/icons.scss @@ -15,36 +15,41 @@ $icon-size: 24px; /// @param {String} $replace ('') - New value /// @return {String} - Updated string @function str-replace($string, $search, $replace: '') { - $index: str-index($string, $search); + $index: str-index($string, $search); - @if $index { - @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace); - } - - @return $string; + @if $index { + @return str-slice($string, 1, $index - 1) + $replace + + str-replace(str-slice($string, $index + str-length($search)), $search, $replace); } + @return $string; +} + @mixin icon($name, $path, $theme-color) { - // split theme color into name and value - $theme-color-name: nth($theme-color, 1); - $theme-color-value: nth($theme-color, 2); - // escape characters for html - $escaped-color: str-replace(inspect($theme-color-value), "#", "%23"); - - .icon-#{$name}-#{$theme-color-name} { - display: inline-block; - width: $icon-size; - height: $icon-size; - background-image: url('data:image/svg+xml, #{$path} '); - background-repeat: no-repeat; - background-position: center; - background-size: $icon-size; - } + // split theme color into name and value + $theme-color-name: nth($theme-color, 1); + $theme-color-value: nth($theme-color, 2); + // escape characters for html + $escaped-color: str-replace(inspect($theme-color-value), '#', '%23'); + + .icon-#{$name}-#{$theme-color-name} { + display: inline-block; + width: $icon-size; + height: $icon-size; + background-image: url('data:image/svg+xml, #{$path} '); + background-repeat: no-repeat; + background-position: center; + background-size: $icon-size; + } } // icons list // (add new icons here) @each $theme-color in $theme-colors { - // iterate over bootstrap theme colors - @include icon('user', '', $theme-color); + // iterate over bootstrap theme colors + @include icon( + 'user', + '', + $theme-color + ); } diff --git a/app/assets/stylesheets/limber/screen.scss b/app/assets/stylesheets/limber/screen.scss index 50b52b652..80bc2a471 100644 --- a/app/assets/stylesheets/limber/screen.scss +++ b/app/assets/stylesheets/limber/screen.scss @@ -49,7 +49,7 @@ body { @extend .btn-light; @extend .border; } - @extend .border-bottom; // add border to bottom to increase visibility + @extend .border-bottom; // add border to bottom to increase visibility border-bottom-color: #eaecef !important; // set border color to match jumbotron background } @@ -82,7 +82,7 @@ header.limber-header { // Set the background color of the navbar based on the environment .production { header.limber-header { - @extend %navbar-dark-style; + @extend %navbar-dark-style; nav { @extend .bg-production; } @@ -98,26 +98,26 @@ header.limber-header { .training { header.limber-header { - @extend %navbar-dark-style; + @extend %navbar-dark-style; nav { @extend .bg-training; } .btn-logout { @extend .btn-success; - border-color: darken($training, 5%) !important + border-color: darken($training, 5%) !important; } } } .staging { header.limber-header { - @extend %navbar-dark-style; + @extend %navbar-dark-style; nav { @extend .bg-staging; } .btn-logout { @extend .btn-danger; - border-color: darken($staging, 5%) !important + border-color: darken($staging, 5%) !important; } } } diff --git a/spec/helpers/application_helper_spec.rb b/spec/helpers/application_helper_spec.rb index c8eecce79..1bb169ed2 100644 --- a/spec/helpers/application_helper_spec.rb +++ b/spec/helpers/application_helper_spec.rb @@ -1,6 +1,8 @@ -require './app/helpers/application_helper' +# frozen_string_literal: true -describe ApplicationHelper do +require 'spec_helper' + +RSpec.describe ApplicationHelper do describe '#favicon' do subject(:favicon) { helper.favicon } From 489255e0572c560fa7e64b21f610a54deab82920 Mon Sep 17 00:00:00 2001 From: Stephen Hulme Date: Thu, 9 Nov 2023 16:24:38 +0000 Subject: [PATCH 7/8] docs: update attributions --- app/assets/stylesheets/limber/icons.scss | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/app/assets/stylesheets/limber/icons.scss b/app/assets/stylesheets/limber/icons.scss index c0aef06f8..1c477d831 100644 --- a/app/assets/stylesheets/limber/icons.scss +++ b/app/assets/stylesheets/limber/icons.scss @@ -1,5 +1,4 @@ // Bare Bones Icon System -// Created by Stephen Hulme, 2023-11-9 // Usage: // @@ -44,9 +43,12 @@ $icon-size: 24px; } // icons list -// (add new icons here) +// (add new icons here, note names must not contain dashes '-') @each $theme-color in $theme-colors { // iterate over bootstrap theme colors + + // icons by Heroicons https://heroicons.com/ + // user-circle @include icon( 'user', '', From 8445c19617b5fc1491d7c9e77fee19892e853ad2 Mon Sep 17 00:00:00 2001 From: Stephen Hulme Date: Tue, 14 Nov 2023 10:32:16 +0000 Subject: [PATCH 8/8] fix: rename apple-icon -> apple-touch-icon --- app/helpers/application_helper.rb | 8 ++++---- app/views/layouts/application.html.erb | 2 +- spec/helpers/application_helper_spec.rb | 24 ++++++++++++------------ 3 files changed, 17 insertions(+), 17 deletions(-) diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb index e00f68ae0..22916a7fa 100644 --- a/app/helpers/application_helper.rb +++ b/app/helpers/application_helper.rb @@ -60,9 +60,9 @@ def favicon "favicon#{icon_suffix}.ico" end - # Return the appropriate apple icon for the current environment - # @return [String] The path to the apple icon - def apple_icon - "apple-icon#{icon_suffix}.png" + # Return the appropriate apple-touch-icon for the current environment + # @return [String] The path to the apple-touch-icon + def apple_touch_icon + "apple-touch-icon#{icon_suffix}.png" end end diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index 32e685b58..d7eff1795 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -21,7 +21,7 @@ <% end %> - + diff --git a/spec/helpers/application_helper_spec.rb b/spec/helpers/application_helper_spec.rb index 1bb169ed2..4b6658db1 100644 --- a/spec/helpers/application_helper_spec.rb +++ b/spec/helpers/application_helper_spec.rb @@ -32,32 +32,32 @@ end end - describe '#apple_icon' do - subject(:apple_icon) { helper.apple_icon } + describe '#apple_touch_icon' do + subject(:apple_touch_icon) { helper.apple_touch_icon } - it 'returns the apple icon path for the production environment' do + it 'returns the apple-touch-icon path for the production environment' do allow(Rails).to receive(:env).and_return('production') - expect(apple_icon).to eq('apple-icon.png') + expect(apple_touch_icon).to eq('apple-touch-icon.png') end - it 'returns the apple icon path for the training environment' do + it 'returns the apple-touch-icon path for the training environment' do allow(Rails).to receive(:env).and_return('training') - expect(apple_icon).to eq('apple-icon-training.png') + expect(apple_touch_icon).to eq('apple-touch-icon-training.png') end - it 'returns the apple icon path for the staging environment' do + it 'returns the apple-touch-icon path for the staging environment' do allow(Rails).to receive(:env).and_return('staging') - expect(apple_icon).to eq('apple-icon-staging.png') + expect(apple_touch_icon).to eq('apple-touch-icon-staging.png') end - it 'returns the apple icon path for the development environment' do + it 'returns the apple-touch-icon path for the development environment' do allow(Rails).to receive(:env).and_return('development') - expect(apple_icon).to eq('apple-icon-development.png') + expect(apple_touch_icon).to eq('apple-touch-icon-development.png') end - it 'returns the apple icon path for an unknown environment' do + it 'returns the apple-touch-icon path for an unknown environment' do allow(Rails).to receive(:env).and_return('unknown') - expect(apple_icon).to eq('apple-icon-development.png') + expect(apple_touch_icon).to eq('apple-touch-icon-development.png') end end end