show.html.haml in jobshop-0.0.5

- old
+ new
@@ -1,139 +1,278 @@
-%h1 Welcome aboard!
+%div(class="demo-layout mdl-layout mdl-js-layout mdl-layout--fixed-drawer mdl-layout--fixed-header")
+  %header(class="demo-header mdl-layout__header mdl-color--grey-100 mdl-color-text--grey-600")
+    %div(class="mdl-layout__header-row")
+      %span(class="mdl-layout-title") Home
+      %div(class="mdl-layout-spacer")
+      %div(class="mdl-textfield mdl-js-textfield mdl-textfield--expandable")
+        %label(class="mdl-button mdl-js-button mdl-button--icon" for="search")
+          %i(class="material-icons") search
+        %div(class="mdl-textfield__expandable-holder")
+          %input(class="mdl-textfield__input" type="text" id="search")
+          %label(class="mdl-textfield__label" for="search") Enter your query...
+      %button(class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon" id="hdrbtn")
+        %i(class="material-icons") more_vert
+      %ul(class="mdl-menu mdl-js-menu mdl-js-ripple-effect mdl-menu--bottom-right" for="hdrbtn")
+        %li(class="mdl-menu__item")= link_to("About", about_path)
+        %li(class="mdl-menu__item") Contact
+        %li(class="mdl-menu__item") Legal information
+  %div(class="demo-drawer mdl-layout__drawer mdl-color--blue-grey-900 mdl-color-text--indigo-50")
+    %header(class="demo-drawer-header")
+      %i(class="material-icons" style="font-size: 48px;") person
+      //%img(class="demo-avatar" src="images/user.jpg")
+      %div(class="demo-avatar-dropdown")
+        %span= current_user.email
+        %div(class="mdl-layout-spacer")
+        %button(id="accbtn" class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon")
+          %i(class="material-icons" role="presentation") arrow_drop_down
+          %span(class="visuallyhidden") User Actions
+        %ul(class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect" for="accbtn")
+          %li(class="mdl-menu__item")
+            %a(href="#{destroy_user_session_path}" data-method="delete") Sign out
+    %nav(class="demo-navigation mdl-navigation mdl-color--blue-grey-800")
+      %a(class="mdl-navigation__link" href="")
+        %i(class="mdl-color-text--blue-grey-400 material-icons" role="presentation") home
+        Home
+      %a(class="mdl-navigation__link" href="")
+        %i(class="mdl-color-text--blue-grey-400 material-icons" role="presentation") flag
+        Updates
+      %div(class="mdl-layout-spacer")
+      %a(class="mdl-navigation__link" href="")
+        %i(class="mdl-color-text--blue-grey-400 material-icons" role="presentation") help_outline
+        Help
+
+  %main(class="mdl-layout__content mdl-color--grey-100")
+    %div(class="mdl-grid demo-content")
+      %div(class="demo-charts mdl-color--white mdl-shadow--2dp mdl-cell mdl-cell--12-col mdl-grid")
+        %svg(fill="currentColor" width="200px" height="200px" viewBox="0 0 1 1" class="demo-chart mdl-cell mdl-cell--4-col mdl-cell--3-col-desktop")
+          %use(xlink:href="#piechart" mask="url(#piemask)")
+          %text(x="0.5" y="0.5" font-family="Roboto" font-size="0.3" fill="#888" text-anchor="middle" dy="0.1")
+            82
+            %tspan(font-size="0.2" dy="-0.07") %
+        %svg(fill="currentColor" width="200px" height="200px" viewBox="0 0 1 1" class="demo-chart mdl-cell mdl-cell--4-col mdl-cell--3-col-desktop")
+          %use(xlink:href="#piechart" mask="url(#piemask)")
+          %text(x="0.5" y="0.5" font-family="Roboto" font-size="0.3" fill="#888" text-anchor="middle" dy="0.1")
+            82
+            %tspan(dy="-0.07" font-size="0.2") %
+        %svg(fill="currentColor" width="200px" height="200px" viewBox="0 0 1 1" class="demo-chart mdl-cell mdl-cell--4-col mdl-cell--3-col-desktop")
+          %use(xlink:href="#piechart" mask="url(#piemask)")
+          %text(x="0.5" y="0.5" font-family="Roboto" font-size="0.3" fill="#888" text-anchor="middle" dy="0.1")
+            82
+            %tspan(dy="-0.07" font-size="0.2") %
+        %svg(fill="currentColor" width="200px" height="200px" viewBox="0 0 1 1" class="demo-chart mdl-cell mdl-cell--4-col mdl-cell--3-col-desktop")
+          %use(xlink:href="#piechart" mask="url(#piemask)")
+          %text(x="0.5" y="0.5" font-family="Roboto" font-size="0.3" fill="#888" text-anchor="middle" dy="0.1")
+            82
+            %tspan(dy="-0.07" font-size="0.2") %
+      %div(class="mdl-shadow--2dp mdl-color--white mdl-cell mdl-cell--8-col")
+        %h2 Welcome aboard.
+      %div(class="demo-graphs mdl-shadow--2dp mdl-color--white mdl-cell mdl-cell--8-col")
+        %svg(fill="currentColor" viewBox="0 0 500 250" class="demo-graph")
+          %use(xlink:href="#chart")
+        %svg(fill="currentColor" viewBox="0 0 500 250" class="demo-graph")
+          %use(xlink:href="#chart")
+      %div(class="demo-cards mdl-cell mdl-cell--4-col mdl-cell--8-col-tablet mdl-grid mdl-grid--no-spacing")
+        %div(class="demo-options mdl-card mdl-color--orange-500 mdl-shadow--2dp mdl-cell mdl-cell--4-col mdl-cell--3-col-tablet mdl-cell--12-col-desktop")
+          %div(class="mdl-card__supporting-text mdl-color-text--blue-grey-50")
+            %h3 View options
+            %ul
+              %li
+                %label(for="chkbox1" class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect")
+                  %input(type="checkbox" id="chkbox1" class="mdl-checkbox__input")
+                  %span(class="mdl-checkbox__label") Identify key people
+              %li
+                %label(for="chkbox2" class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect")
+                  %input(type="checkbox" id="chkbox2" class="mdl-checkbox__input")
+                  %span(class="mdl-checkbox__label") Identify key places
+              %li
+                %label(for="chkbox3" class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect")
+                  %input(type="checkbox" id="chkbox3" class="mdl-checkbox__input")
+                  %span(class="mdl-checkbox__label") Identify key things
+              %li
+                %label(for="chkbox4" class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect")
+                  %input(type="checkbox" id="chkbox4" class="mdl-checkbox__input")
+                  %span(class="mdl-checkbox__label") Make something!
+          %div(class="mdl-card__actions mdl-card--border")
+            %a(href="#" class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-color-text--blue-grey-50") Lets get started!
+            %div(class="mdl-layout-spacer")
+            %i(class="material-icons") location_on
+        %div(class="demo-separator mdl-cell--1-col")
+        %div(class="demo-updates mdl-card mdl-shadow--2dp mdl-cell mdl-cell--4-col mdl-cell--4-col-tablet mdl-cell--12-col-desktop")
+          %div(class="mdl-card__title mdl-card--expand mdl-color--teal-300")
+            %h2(class="mdl-card__title-text") Updates
+          %div(class="mdl-card__supporting-text mdl-color-text--grey-600")
+            Non dolore elit adipisicing ea reprehenderit consectetur culpa.
+          %div(class="mdl-card__actions mdl-card--border")
+            %a(href="#" class="mdl-button mdl-js-button mdl-js-ripple-effect") Read More
+
+%svg(style="position: fixed; left: -1000px; height: -1000px;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink")
+  %defs
+    %mask(id="piemask" maskContentUnits="objectBoundingBox")
+      %circle(cx="0.5" cy="0.5" fill="white" r="0.49")
+      %circle(cx="0.5" cy="0.5" fill="black" r="0.40")
+    %g(id="piechart")
+      %circle(cx="0.5" cy="0.5" r="0.5")
+      %path(d="M 0.5 0.5 0.5 0 A 0.5 0.5 0 0 1 0.95 0.28 z" fill="rgba(255, 255, 255, 0.75)" stroke="none")
+%svg(version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 500 250" style="position: fixed; left: -1000px; height: -1000px;")
+  %defs
+    %g(id="chart")
+      %g(id="Gridlines")
+        %line(fill="#888888" stroke="#888888" stroke-miterlimit="10" x1="0" y1="27.3" x2="468.3" y2="27.3")
+        %line(fill="#888888" stroke="#888888" stroke-miterlimit="10" x1="0" y1="66.7" x2="468.3" y2="66.7")
+        %line(fill="#888888" stroke="#888888" stroke-miterlimit="10" x1="0" y1="105.3" x2="468.3" y2="105.3")
+        %line(fill="#888888" stroke="#888888" stroke-miterlimit="10" x1="0" y1="144.7" x2="468.3" y2="144.7")
+        %line(fill="#888888" stroke="#888888" stroke-miterlimit="10" x1="0" y1="184.3" x2="468.3" y2="184.3")
+      %g(id="Numbers")
+        %text(transform="matrix(1 0 0 1 485 29.3333)" fill="#888888" font-family="'Roboto'" font-size="9") 500
+        %text(transform="matrix(1 0 0 1 485 69)" fill="#888888" font-family="'Roboto'" font-size="9") 400
+        %text(transform="matrix(1 0 0 1 485 109.3333)" fill="#888888" font-family="'Roboto'" font-size="9") 300
+        %text(transform="matrix(1 0 0 1 485 149)" fill="#888888" font-family="'Roboto'" font-size="9") 200
+        %text(transform="matrix(1 0 0 1 485 188.3333)" fill="#888888" font-family="'Roboto'" font-size="9") 100
+        %text(transform="matrix(1 0 0 1 0 249.0003)" fill="#888888" font-family="'Roboto'" font-size="9") 1
+        %text(transform="matrix(1 0 0 1 78 249.0003)" fill="#888888" font-family="'Roboto'" font-size="9") 2
+        %text(transform="matrix(1 0 0 1 154.6667 249.0003)" fill="#888888" font-family="'Roboto'" font-size="9") 3
+        %text(transform="matrix(1 0 0 1 232.1667 249.0003)" fill="#888888" font-family="'Roboto'" font-size="9") 4
+        %text(transform="matrix(1 0 0 1 309 249.0003)" fill="#888888" font-family="'Roboto'" font-size="9") 5
+        %text(transform="matrix(1 0 0 1 386.6667 249.0003)" fill="#888888" font-family="'Roboto'" font-size="9") 6
+        %text(transform="matrix(1 0 0 1 464.3333 249.0003)" fill="#888888" font-family="'Roboto'" font-size="9") 7
+      %g(id="Layer_5")
+        %polygon(opacity="0.36" stroke-miterlimit="10" points="0,223.3 48,138.5 154.7,169 211,88.5 294.5,80.5 380,165.2 437,75.5 469.5,223.3")
+      %g(id="Layer_4")
+        %polygon(stroke-miterlimit="10" points="469.3,222.7 1,222.7 48.7,166.7 155.7,188.3 212,132.7 296.7,128 380.7,184.3 436.7,125")