From 068413431cd2b247c084ffd567a29f1abe5c41ff Mon Sep 17 00:00:00 2001 From: Olivier Lacan Date: Fri, 19 Oct 2018 18:41:32 -0400 Subject: [PATCH 1/3] Use CSS flexbox for Guides index menu This notably allows us to tile each category without pushing the page down vertically as much as we previously did on any viewport wider than mobile sizes. It also means we can fit more guides which will become useful in the future since we have several new guides in the work. Finally the new layout allows three clearly distinct columns to emerge: - Start Here and Rails basics: Models, Views, Controllers, Other Components - Digging Deeper, Extending Rails, Contributing, Maintenance - Release Notes Having Release Notes shoot back up to the top of the third column is great because that makes finding the latest released version and its associated release notes much easier without having to scroll down a bunch. [ci skip] --- guides/assets/stylesheets/main.css | 45 ++++++++++++++++++++++-------- guides/source/layout.html.erb | 18 ++++++------ 2 files changed, 43 insertions(+), 20 deletions(-) diff --git a/guides/assets/stylesheets/main.css b/guides/assets/stylesheets/main.css index 2657a84a91fd3..d6897aae03a8c 100644 --- a/guides/assets/stylesheets/main.css +++ b/guides/assets/stylesheets/main.css @@ -401,14 +401,10 @@ a, a:link, a:visited { } #guides { - width: 27em; + width: 37em; display: block; background: #980905; border-radius: 1em; - -webkit-border-radius: 1em; - -moz-border-radius: 1em; - -webkit-box-shadow: 0.25em 0.25em 1em rgba(0,0,0,0.25); - -moz-box-shadow: rgba(0,0,0,0.25) 0.25em 0.25em 1em; color: #f1938c; padding: 1.5em 2em; position: absolute; @@ -422,17 +418,44 @@ a, a:link, a:visited { display: block !important; } -#guides dt, #guides dd { +.guides-section dt, .guides-section dd { font-weight: normal; font-size: 0.722em; margin: 0; padding: 0; } -#guides dt {padding:0; margin: 0.5em 0 0;} -#guides a {color: #FFF; background: none !important; text-decoration: none;} -#guides a:hover {text-decoration: underline;} -#guides .L, #guides .R {float: left; width: 50%; margin: 0; padding: 0;} -#guides .R {float: right;} +.guides-section dt { + margin: 0.5em 0 0; + padding:0; +} +#guides a { + background: none !important; + color: #FFF; + text-decoration: none; +} +#guides a:hover { + text-decoration: underline; +} +.guides-section-container { + display: flex; + flex-direction: column; + flex-wrap: wrap; + width: 100%; + max-height: 35em; +} + +.guides-section { + min-width: 5em; + margin: 0 2em 0.5em 0; + flex: auto; + max-width: 12em; +} + +.guides-section dd { + line-height: 1.3; + margin-bottom: 0.5em; +} + #guides hr { display: block; border: none; diff --git a/guides/source/layout.html.erb b/guides/source/layout.html.erb index dd9175e312f1d..1f42d72756b19 100644 --- a/guides/source/layout.html.erb +++ b/guides/source/layout.html.erb @@ -45,16 +45,16 @@ Guides Index
  • Contribute
    • From af6dbcf1ed61ee089bfd22a67d9888ed72061d3f Mon Sep 17 00:00:00 2001 From: Olivier Lacan Date: Fri, 19 Oct 2018 18:47:51 -0400 Subject: [PATCH 2/3] Shorten unnecessarily long names for Guides MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The names are only used in the Guides Index overlay and several of them are longer than they need to be. For example “Ruby on Rails” is mentioned over and over again in the Release Notes section although these are obviously all Rails versions we’re listing. There’s a Maintenance Policy category with a Maintenance Policy article which is redundant. Policies makes much more sense as a category. Similarly, Contributing to Ruby on Rails is both a category and an article. “Contributions” is a better category title. “Ruby on Rails Guides Guidelines” is a gigantic mouthful. We are *in* the Rails Guides, we don’t need to specify what guides we’re talking about here. As a final added advantage, all of these shortenings make the index much easier to parse in order to find an article. [ci skip] --- guides/source/documents.yaml | 32 ++++++++++++++++---------------- 1 file changed, 16 insertions(+), 16 deletions(-) diff --git a/guides/source/documents.yaml b/guides/source/documents.yaml index 8f2312458d863..551179c5238ac 100644 --- a/guides/source/documents.yaml +++ b/guides/source/documents.yaml @@ -173,7 +173,7 @@ description: This guide describes the considerations needed and tools available when working directly with concurrency in a Rails application. work_in_progress: true - - name: Contributing to Ruby on Rails + name: Contributions documents: - name: Contributing to Ruby on Rails @@ -184,14 +184,14 @@ url: api_documentation_guidelines.html description: This guide documents the Ruby on Rails API documentation guidelines. - - name: Ruby on Rails Guides Guidelines + name: Guides Guidelines url: ruby_on_rails_guides_guidelines.html description: This guide documents the Ruby on Rails guides guidelines. - - name: Maintenance Policy + name: Policies documents: - - name: Maintenance Policy for Ruby on Rails + name: Maintenance Policy url: maintenance_policy.html description: What versions of Ruby on Rails are currently supported, and when to expect new versions. - @@ -202,51 +202,51 @@ url: upgrading_ruby_on_rails.html description: This guide helps in upgrading applications to latest Ruby on Rails versions. - - name: Ruby on Rails 6.0 Release Notes + name: 6.0 Release Notes work_in_progress: true url: 6_0_release_notes.html description: Release notes for Rails 6.0. - - name: Ruby on Rails 5.2 Release Notes + name: 5.2 Release Notes url: 5_2_release_notes.html description: Release notes for Rails 5.2. - - name: Ruby on Rails 5.1 Release Notes + name: 5.1 Release Notes url: 5_1_release_notes.html description: Release notes for Rails 5.1. - - name: Ruby on Rails 5.0 Release Notes + name: 5.0 Release Notes url: 5_0_release_notes.html description: Release notes for Rails 5.0. - - name: Ruby on Rails 4.2 Release Notes + name: 4.2 Release Notes url: 4_2_release_notes.html description: Release notes for Rails 4.2. - - name: Ruby on Rails 4.1 Release Notes + name: 4.1 Release Notes url: 4_1_release_notes.html description: Release notes for Rails 4.1. - - name: Ruby on Rails 4.0 Release Notes + name: 4.0 Release Notes url: 4_0_release_notes.html description: Release notes for Rails 4.0. - - name: Ruby on Rails 3.2 Release Notes + name: 3.2 Release Notes url: 3_2_release_notes.html description: Release notes for Rails 3.2. - - name: Ruby on Rails 3.1 Release Notes + name: 3.1 Release Notes url: 3_1_release_notes.html description: Release notes for Rails 3.1. - - name: Ruby on Rails 3.0 Release Notes + name: 3.0 Release Notes url: 3_0_release_notes.html description: Release notes for Rails 3.0. - - name: Ruby on Rails 2.3 Release Notes + name: 2.3 Release Notes url: 2_3_release_notes.html description: Release notes for Rails 2.3. - - name: Ruby on Rails 2.2 Release Notes + name: 2.2 Release Notes url: 2_2_release_notes.html description: Release notes for Rails 2.2. From 8990921ba95e82b2d9e77730cf37ebdc6772aa63 Mon Sep 17 00:00:00 2001 From: Olivier Lacan Date: Fri, 19 Oct 2018 19:08:42 -0400 Subject: [PATCH 3/3] Replace outdated Rails Guides logo MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The previous version wasn’t matching the Rails Guides logo source file listed at https://github.com/rails/homepage/blob/master/materials/rails_guides_logo.psd somehow. It was also a GIF when an 8-bit PNG results in a smaller file (2KB vs 4KB) which should be just as widely compatible with browsers. And that’s just for the 1x version. I added a new 2x version for “retina” or high-density displays and a CSS @media query to progressively enhance with this high density version of the logo. I’ve ensured that this query is supported across browsers by using vendor-specific versions when necessary. See: https://caniuse.com/#feat=css-media-resolution [ci skip] --- guides/assets/images/rails_guides_logo_1x.png | Bin 0 -> 2340 bytes guides/assets/images/rails_guides_logo_2x.png | Bin 0 -> 3107 bytes guides/assets/stylesheets/main.css | 15 ++++++++++++++- 3 files changed, 14 insertions(+), 1 deletion(-) create mode 100644 guides/assets/images/rails_guides_logo_1x.png create mode 100644 guides/assets/images/rails_guides_logo_2x.png diff --git a/guides/assets/images/rails_guides_logo_1x.png b/guides/assets/images/rails_guides_logo_1x.png new file mode 100644 index 0000000000000000000000000000000000000000..8c6810c3123b5ae7c9fa73669683851a3ffcfb6b GIT binary patch literal 2340 zcmV+<3ETFGP)oc;Ov@XN@>FeS)4G3c$S z`RVBX{QUp@{q)w<-;RjJF(=7BH2Lc3?Z3O}udCdHeCDK|{Pgtw_xAG7%+Xm;)oNnv zxU}c0rpiDz`|$Ak?(N!qb@9&2|Nj2(#>31>KiPP2$2BVY?d;ihZ~gfA($MwV*y*yZ;ggN^+u7fXg~l`~$2Kh9iGuv~_0U&N z>$bA^<>c3IXUI4$_1)Xyl#a?mIP12v>9DNpx3lob#q-qB%0D&KWL)2kht5t#(_&fn z-`>eRGwr>($2TqW)6w_js@i#S?7X?;o|*I2)99_J(p*#KrlHhj zUB)se`|$7WzPje5p!w+M-;9RGHY>Kk^AjE;?uMpX?nqICjl5|h-G zH#I$jplCNRJ2#fWkog5DL_{NGk$RSv(Yb<<2KKM60a)MYVbCU&A&R#A!R~G9*xAk6 z+j8wAZPB#h(u@7eckdu`ii z-`ciq+w4r%NONu5wspS$^4Y>u9~xYdD3*mY5stP zhNys`huh0$JO0qiZQiwf=nAln%m$5@WHa52*4_iylTDirh4cid4o$PA4 z#~x6HiR}yIDz>nLjU9UKV%H{TlklQjY$}APon*J`Mc3H7iHWV`IJTdO&1}finv=6a zGxogV7W)MNdnxAgsav;Jp_q4EV}HoS)^ZnH;9|#y*r%B&@TC0*iXrMCF{U4)O^0o< z7Z%j@p_qff5fT=61n^>O65ex--Gg+KUNdPaWt5~ITiivl#nuqRY{;`dq{3^C9>Z~R z_A|y3ov_6|3B#Kt%mq%8unM}ODaRJqZG|j9cJ7_}oQP(>eTo>Tah#|d7rPG$uZ!3s zui@E?y-yP&D!ghtksfm}F)CtODH_hjK0`u{%wwM=U6m<@FV3BR9I=C%z)bP{3cP76 zMXj3nB{5zHde{Api(Qk1wwcGCLKY3W4Y0+I1QXPp#EyeOWmaIk=j#josWHY9=S2YT z_F`fmEk%aU2W1}nBuUy|lwynj1mzLL#=d~fC3w{3ai~g+FCoaWuWXIlNijW;dF-O~ zNpf}KV~(u^Z1(x!Ro95qfQfB&-4uJ#Nkhu9apNXQ4m{@Ahy-jR@T#lCnVm}PB1J`P zNs6)YMo+T3^|)i>(!PKs46iChoGK~AzTE{`#m0-j4xGASLxV3jZ1_^#?(hXIr?EB2 ze32bNVV}om-LDg?fNSh8yA444u^C&*AZ64&%Gl4<5=#?e?Q)6TVEYXqKlU@EB(bXC z@*7NS;ZDm(9NVuL>?Jit7q-Wi@1ogahm{2NIg9-U@!H@n4Zc^~7JIf_JDu2HZcVs| z4p&V+H%$SwfCIfvC}4L#i(kDEG}{*+(3`pv?`JF`qMEkY4}OsUIQ#7q9(T3Coi^_YR6;$@tPr<*i+brt^4*_v7oxg*3yct z!kZcpkMJiEeLm3^8#hW=Yx65;>BcU65MZL_G0%c9Tx0J;IrqAeM225{uoT$1z zwp=@Ru`3}a%q(lEp@5a&=NdbtrXE`i=t+Ok!#n^`eahbsu`%zaxpuB%S6POH9oAkE z#HjnM!F+Iwy-!8zvBiL%^bbAEzYrW^W52m}PGUD`^xry|JgVFu+x~2LJ#70000004xPGUz$fFau`wo0000< KMNUMnLSTZ5Tkp>R literal 0 HcmV?d00001 diff --git a/guides/assets/images/rails_guides_logo_2x.png b/guides/assets/images/rails_guides_logo_2x.png new file mode 100644 index 0000000000000000000000000000000000000000..accc6bbfa4cbae1d241aab9a663b2e7ad87cb0bc GIT binary patch literal 3107 zcmai0c{J1w7arSq8!$!dPa6NEw22=iKw0bDwk1^T$oJwK*pYI|hS5Ai@MZ?ji)j z2k!Iizxej6S2Ch@zctueUp8;kQk;vVu0Bp4^>UpG@mr)tFF#E9*WdG3?48+L*Z21E z=g*&=oo&`i_Zj^i_BwlLaL|d^u6=xCWO!@t$L=Qg_u@k5NzD$78h3W4>y*x7b;U|6 z<9lxA2sP+uY2oPY5bor}FW?_$9sQdxY54lJ9|bwnk5i@|C2ow5uJ&|&^>Chjl0F_2 zF_9EE_o{%^**5HE*MHe+ZJ>|U-8mLXUHVwxZ*S9WZq$P}=_8m<#7Fg7n@wjt9I(X) zuR1G0AVTs4+?mU_+?fA%gh(13<)1RqM{A?!|H-XtSlM%Mma0@tN_T|{TUL$#d02CE z!#$q=IO>1nE$0Ujk#FYjH zN0GG(Rc)doiL~6%Um-~_WSSk9|6@pq;X-Tgsd9lWv{B&aelQu$=($G;Fp_A&5oZwcblfAh$1td@jp{F;f@D61!{|L>Y&mc>U6hGwFyqo zj$J)jBGGtBXcdF|-q-J_XSJGjNryJJt~xYlpr2*HIg6vC3|>}EV=M{MuP2SYpK=re zeX&#dw76AiEc<2yeFN=ZnV=Dn8A7Qu(YfRGhIJk%ljA8~-X7**==Edh^VM`I537XN z2UlJPblV4P9)IETc&XhV@$bP!6%7Zqg&Qq(o<1RfXhP_$lxb_vpP-}5&lCV(v z$nC$*aqp{ZpF*awyglNU2hD9e3T2tOB*C`|W&9eO@~9N-lOuiG!}{P_vh;aaCKIzS z)$B64$K%SL9_YN@b#N+?Ha;>2O+9M(lu-(_e^K2RlpaAi8M0)X%2p%o%yD0utIHp+ zx>;_^G}7>oMcN_hG@tFwl(C`d1X}V>IVcN}HXynauHxX|1V{cFIKw|xY?1ziwIq;7 z!~1T|_bAwYb}%%%l8DC%`aqm8nMaCLkhO1O4_aN)yg?+Qbe{9&y!cwSmRCi4l_}x| zd@0fPpW2&s=PXyNUkMVLV)1|YiX+;Z_J)lO*$gemc)hOO`XjrT`%oHMdU_`Nos>)8 zPD8PHpEkQq*YvsuogQ4{+k}A0+sRq;v$AeXZA7PC^kr~)&0a($JF3d6-mC2BO-&U~ z(HJ$N#q^?HZy9CO14I3TNzgEPzN^=oo+F?f#OM>Zz^2dyH;$bz(hChqvOv!+xbZ)L~@o%aN$O-_Q6`(jCqPuElBC ztw-^XmA65UV)JQQ)29BXhA2ylReyfYMvp&0FQF!9Ww1$S!u!G#Rh60o7s6LbizzHY zpyj?>FgUJzG5ihVh_kYEb&E`)r_DJ(a(Nw155zQ}fwq_)fY10y%bfZQ7@OZ@vHm4G z=-(UYhG|PBX7vNyzNQG+kW*lqmY<^ZnOjO4QYt1*{ujU{pV@2L7FM9Z zm4H{xLoi`yxK5J@`%}wY9llrqMw*qzji?N}2s4FVHPhKwTgrUyx$duD7A6?0MjMB9 zek97OM>ptp0XYH*Z-csk_u)Utp#h53L|)0`-`idkzUJj%(#iQ^($vQX$4KCZ`k1Fe z5IzB*o}HBl1FZ}x4L<>l4kd-Wu12ZQZi)!vhJrN;K^LlM}Ocy_$5XrY4zWLUM%lX*Lau$b?#==1IGwh@4=k66hj>r#qqa@pLG<;P<(+!qnP8GG^WCxRiujPW1{~xF zq~GGI)_}rVc_*-h%1!#LJwy@hKDHyv2>f}jM9}s{jqCU4E4Z&k`uVa>+j}%%US)0` zVzi;ajoMpN=XVx;S!Q1v^jt4^n0G)vJ*jBoHcd!}LR76w6=Wg{hZ@;GNC||1_506` zM7ml*yb>2@?KOl*abK-LALH31*qFo%TYYg5-OBz@dzfOZ`c@AxYq(fhJMg@3PiX|WTT=+YoZ^tpPf^e=Z3YYktGsxa2qXKOB4TuvZ8qR8>I8wDkb I%upF@}rpS zwWwCOZ-TlOWf@vk{ddv)eRecRY0ET6zs|%^Zxq z;eDNt*FssC5gtRzz(yBI(6*#T(|cJ{XMV5l$$eo-Eg}_3zG;Ti1PAnt>&+_MrFK;c2}aaXr)-~7ZHwUq$LfszcBvoj4-rRjD;sPGc9|M~67r6!&O`_FqbdixEw ggX}D}&;Ku^mS31&EwrrM&jJKOFt@>#oh8Nm2V`U2=>Px# literal 0 HcmV?d00001 diff --git a/guides/assets/stylesheets/main.css b/guides/assets/stylesheets/main.css index d6897aae03a8c..bdc3e2197797b 100644 --- a/guides/assets/stylesheets/main.css +++ b/guides/assets/stylesheets/main.css @@ -538,13 +538,26 @@ h6 { #header h1 { float: left; - background: url(../images/rails_guides_logo.gif) no-repeat; + background: url(../images/rails_guides_logo_1x.png) no-repeat; width: 297px; text-indent: -9999em; margin: 0; padding: 0; } +@media +only screen and (-webkit-min-device-pixel-ratio: 2), +only screen and ( min--moz-device-pixel-ratio: 2), +only screen and ( -o-min-device-pixel-ratio: 2/1), +only screen and ( min-device-pixel-ratio: 2), +only screen and ( min-resolution: 192dpi), +only screen and ( min-resolution: 2dppx) { + #header h1 { + background: url(../images/rails_guides_logo_2x.png) no-repeat; + background-size: 160%; + } +} + @media screen and (max-width: 480px) { #header h1 { float: none;