From 9c58d28cfe3d806968386565e89ed1dc1f3ad6a6 Mon Sep 17 00:00:00 2001 From: alexwolfe Date: Wed, 4 May 2016 09:13:31 -0700 Subject: [PATCH] Updated Events Page The table now is using the table from the style guide and presents the information in a clearer more attractive way to viewers. --- public/events.jade | 271 ++++++++++-------------- public/resources/css/module/_table.scss | 46 +++- 2 files changed, 145 insertions(+), 172 deletions(-) diff --git a/public/events.jade b/public/events.jade index 9dd5a4730f..0c9e269856 100644 --- a/public/events.jade +++ b/public/events.jade @@ -1,170 +1,117 @@ +table.is-full-width + thead + tr + th Event + th Location + th Date - -.grid-fluid - .c2.text-left - h4 May 18-20, 2016 - .c4.text-left - h4 Mountain View, CA, USA - .c4.text-left - h4 - a( - target="_blank" - href="https://events.google.com/io2016/" - ) Google I/O -.grid-fluid - .c10.text-center - hr - -.grid-fluid - .c2.text-left - h4 May 9-13, 2016 - .c4.text-left - h4 New Orleans, LA, USA - .c4.text-left - h4 - a( - target="_blank" - href="https://events.drupal.org/neworleans2016" - ) DrupalCon -.grid-fluid - .c10.text-center - hr - -.grid-fluid - .c2.text-left - h4 May 14-15, 2016 - .c4.text-left - h4 48 hour online Angular hackathon - .c4.text-left - h4 - a( - target="_blank" - href="http://www.angularattack.com/" - ) Angular Attack -.grid-fluid - .c10.text-center - hr + tbody - -.grid-fluid - .c2.text-left - h4 June 22-25, 2016 - .c4.text-left - h4 Krakow, Poland - .c4.text-left - h4 - a( - target="_blank" - href="http://devoxx.pl/" - ) Devoxx -.grid-fluid - .c10.text-center - hr + + tr + th + a( + target="_blank" + href="https://events.google.com/io2016/" + ) Google I/O + td Mountain View, CA, USA + td May 18-20, 2016 + - -.grid-fluid - .c2.text-left - h4 July 13-15, 2016 - .c4.text-left - h4 London, UK - .c4.text-left - h4 - a( - target="_blank" - href="https://skillsmatter.com/conferences/7278-fullstack-2016-the-conference-on-javascript-node-and-internet-of-things" - ) FullStack -.grid-fluid - .c10.text-center - hr + + tr + th + a( + target="_blank" + href="http://www.angularattack.com/" + ) Angular Attack + td 48 hour online Angular hackathon + td May 14-15, 2016 - -.grid-fluid - .c2.text-left - h4 Sept. 16, 2016 - .c4.text-left - h4 Salt Lake City, UT, USA - .c4.text-left - h4 - a( - target="_blank" - href="https://conf.utahjs.com/" - ) UtahJS -.grid-fluid - .c10.text-center - hr - -.grid-fluid - .c2.text-left - h4 Sept. 27-28, 2016 - .c4.text-left - h4 London, UK - .c4.text-left - h4 - a( - target="_blank" - href="http://angularconnect.com/" - ) Angular Connect -.grid-fluid - .c10.text-center - hr - -.grid-fluid - .c2.text-left - h4 Oct. 24-26, 2016 - .c4.text-left - h4 Paris, France - .c4.text-left - h4 - a( - target="_blank" - href="https://ngeurope.org/" - ) ng-europe -.grid-fluid - .c10.text-center - hr + + tr + th + a( + target="_blank" + href="http://devoxx.pl/" + ) Devoxx + td Krakow, Poland + td June 22-25, 2016 - -.grid-fluid - .c2.text-left - h4 Nov. 7-11, 2016 - .c4.text-left - h4 Antwerp, Belgium - .c4.text-left - h4 - a( - target="_blank" - href="https://www.devoxx.be/" - ) Devoxx Belgium -.grid-fluid - .c10.text-center - hr - -.grid-fluid - .c2.text-left - h4 Nov 14-16, 2016 - .c4.text-left - h4 Amsterdam, Netherlands - .c4.text-left - h4 - a( - target="_blank" - href="https://www.devintersectioneurope.com/" - ) DEVintersection Europe -.grid-fluid - .c10.text-center - hr - -.grid-fluid - .c2.text-left - h4 Dec. 5, 2016 - .c4.text-left - h4 Paris, France - .c4.text-left - h4 - a( - target="_blank" - href="http://www.dotjs.io/" - ) dotJS + + tr + th + a( + target="_blank" + href="https://skillsmatter.com/conferences/7278-fullstack-2016-the-conference-on-javascript-node-and-internet-of-things" + ) FullStack + td London, UK + td July 13-15, 2016 + + + + tr + th + a( + target="_blank" + href="https://conf.utahjs.com/" + ) UtahJS + td Salt Lake City, UT, USA + td Sept. 16, 2016 + + + tr + th + a( + target="_blank" + href="http://angularconnect.com/" + ) Angular Connect + td London, UK + td Sept. 27-28, 2016 + + + + tr + th + a( + target="_blank" + href="https://ngeurope.org/" + ) ng-europe + td Paris, France + td Oct. 24-26, 2016 + + + + tr + th + a( + target="_blank" + href="https://www.devoxx.be/" + ) Devoxx Belgium + td Antwerp, Belgium + td Nov. 7-11, 2016 + + + + tr + th + a( + target="_blank" + href="https://www.devintersectioneurope.com/" + ) DEVintersection Europe + td Amsterdam, Netherlands + td Nov 14-16, 2016 + + + + tr + th + a( + target="_blank" + href="http://www.dotjs.io/" + ) dotJS + td Paris, France + td Dec. 5, 2016 \ No newline at end of file diff --git a/public/resources/css/module/_table.scss b/public/resources/css/module/_table.scss index a65517f54e..e39281ec10 100644 --- a/public/resources/css/module/_table.scss +++ b/public/resources/css/module/_table.scss @@ -4,19 +4,45 @@ table { border-radius: 2px; background: $snow; - th, - td { - padding: ($unit * 2) ($unit * 4); - border-bottom: 1px solid $fog; - text-align: left; + &.is-full-width { + width: 100%; } - th { - background: $mist; - font-weight: 500; + thead { + th { + background: $mist; + border-bottom: 1px solid $mist; + color: $metal; + font-size: 12px; + font-weight: 600; + padding: ($unit) ($unit * 4); + text-align: left; + text-transform: uppercase; + } } - tr:last-child td { - border: none; + tbody { + th, + td { + border-bottom: 1px solid $mist; + color: $platinum; + padding: ($unit * 2) ($unit * 4); + text-align: left; + } + + th { + background: rgba($mist, .24); + border-right: 1px solid $mist; + font-weight: 600; + max-width: 100px; + + a { + color: $blueberry; + } + } + + tr:last-child td { + border: none; + } } } \ No newline at end of file