Merge branch 'trianah-cssGrid'

CodeHubOrg · Sep 4, 2017 · 98d80dc · 98d80dc
2 parents 2968aad + e4f1454
commit 98d80dc
Show file tree

Hide file tree

Showing 4 changed files with 144 additions and 117 deletions.
diff --git a/public/assets/img/Time-48.png b/public/assets/img/Time-48.png
diff --git a/public/assets/sass/partials/resource.scss b/public/assets/sass/partials/resource.scss
@@ -0,0 +1,133 @@
+.resource {
+    min-height: 320px;
+    border: 1px solid #dedede;
+    background-color: #F1F3F4;
+    border-radius: 5px;
+    max-width: 340px;
+    padding: 0.75em;
+    font-family: Inconsolata, PTMono, monospace;
+    font-size: 80%;
+
+    h3{
+        font-size: 120%;
+        line-height: 1.3;
+    }
+}
+
+.resource--header {
+    background-color: #E3B300;
+    border-radius: 3px;
+    color: white;
+    padding: 0.75em 0.5em;
+    font-family: sans-serif;
+}
+
+.resource--header h3 {
+    margin: 0;
+}
+
+.resource--info-lines {
+    list-style: none outside;
+    padding: 0;
+    margin: 0;
+}
+
+
+.resource--info-lines li {
+    margin-top: 14px;
+    line-height: 1.5;
+    margin-right: 0.5em;
+    margin-left: 0.5em;
+}
+
+.resource--info-lines li:last-child{
+    margin-top: 3em;
+}
+
+.resource--info-lines li.top {
+    margin-bottom: 2.5em;
+    font-size: 0.9em;
+
+}
+
+.difficulty {
+    width: 1em;
+    height: 1em;
+    border-radius: 2px;
+    //margin-bottom: 0.75em;
+}
+
+.difficulty-1 {
+    background: #7cfc00;
+}
+.difficulty-2 {
+    background: #ffff00
+}
+.difficulty-3 {
+    background: #ffa500;
+}
+.difficulty-4 {
+    background: #ff8c00
+}
+.difficulty-5 {
+    background: #ff6200;
+}
+.difficulty-6 {
+    background: #89f;
+}
+
+.duration {
+    line-height: 1;
+}
+
+
+.label {
+    color: #635147;
+    background: #edff7a;
+    padding-right: 5px;
+    padding-left: 5px;
+    border-radius: 2px;
+    margin-right: 5px;
+}
+
+.duration {
+    background: url(/assets/img/Time-48.png) no-repeat left;
+}
+
+.resource--Podcast {
+    background: url(/assets/img/Microphone-52.png) no-repeat left;
+}
+
+.resource--Video {
+    background: url(/assets/img/Camcorder-48.png) no-repeat left;
+}
+
+.resource--Book {
+    background: url(/assets/img/Book-48.png) no-repeat left;
+}
+
+.resource--Online.interactive {
+    background: url(/assets/img/Interactive-50.png) no-repeat left;
+}
+
+.resource--Online.written {
+    background: url(/assets/img/ELearning-48.png) no-repeat left;
+}
+
+.resource--type, .duration {
+    padding-left: 1.4em;
+    line-height: 1.1;
+    background-size: 1em !important;
+    background-position: center left;
+}
+
+
+.flex-container.info{
+    display: flex;
+    align-items: center;
+    margin-bottom: 0.25em;
+    //flex-wrap: wrap;
+    > *:not(:last-child){
+        margin-right: 2em;
+    }
+}
diff --git a/public/assets/sass/style.scss b/public/assets/sass/style.scss
@@ -157,23 +157,6 @@ h1.title {
     bottom: 5px;
 }
 
-.resource {
-    min-height: 320px;
-    border: 1px solid #dedede;
-    border-radius: 5px;
-    max-width: 320px;
-    padding: 0 0 10px 0;
-    margin-bottom: 20px;
-}
-
-.resource--header {
-    background: #ffdb58;
-    color: #605b56;
-    margin-top: 0;
-    border: 1px solid #ffdb58;
-
-
-}
 
 .dummy {
     color: #605b56;
@@ -183,73 +166,6 @@ h1.title {
     color: #f2fbe0;
 }
 
-.resource--header h3 {
-    padding: 5px 0 8px 0;
-    margin: 0;
-}
-
-.resource--info-lines {
-    list-style: none outside;
-    padding: 0;
-    margin: 0;
-}
-
-
-.resource--info-lines li {
-    margin-top: 14px;
-    margin-right: 10px;
-    margin-left: 10px;
-    line-height: 1.4;
-}
-
-.resource--info-lines li.top {
-    border-bottom: 1px #fbceb1 dashed
-}
-
-.difficulty {
-    width: 20px;
-    height: 20px;
-    border-radius: 2px;
-}
-
-.difficulty-1 {
-    background: #7cfc00;
-}
-.difficulty-2 {
-    background: #ffff00
-}
-.difficulty-3 {
-    background: #ffa500;
-}
-.difficulty-4 {
-    background: #ff8c00
-}
-.difficulty-5 {
-    background: #ff6200;
-}
-.difficulty-6 {
-    background: #89f;
-}
-
-.duration {
-    line-height: 1.4;
-    height: 28px;
-    font-size: 10px;
-}
-
-.description {
-    color: #765;
-}
-
-.label {
-    color: #635147;
-    background: #edff7a
-;   padding-right: 5px;
-    padding-left: 5px;
-    border-radius: 2px;
-    margin-right: 5px;
-}
-
 .text--centered {
     text-align: center;
 }
@@ -263,38 +179,16 @@ body {
     font-size: 16px;
 }
 
-.resource--Podcast {
-    background: url(/assets/img/Microphone-52.png) no-repeat right;
-}
-
-.resource--Video {
-    background: url(/assets/img/Camcorder-48.png) no-repeat right;
-}
-
-.resource--Book {
-    background: url(/assets/img/Book-48.png) no-repeat right;
-}
 
-.resource--Online.interactive {
-    background: url(/assets/img/Interactive-50.png) no-repeat right;
-    background-size: 25px;
-}
 
-.resource--Online.written {
-    background: url(/assets/img/ELearning-48.png) no-repeat right;
-    background-size: 25px;
-}
+/*
+---------------------
+---- RESOURCE ---------
+---------------------
+*/
 
+@import "partials/resource";
 
-.resource--type {
-    padding-right: 30px;
-    margin-right: 5px;
-    font-size: 12px;
-    height: 28px;
-    line-height: 2.2;
-    text-align: right;
-    background-size: 25px;
-}
 
 /*
 ---------------------
@@ -336,7 +230,8 @@ body {
 }
 
 .grid_cell {
-	width: 310px;
+	max-width: 380px;
+    padding: 1em;
 }
 
 @media (min-width: 700px) {

diff --git a/src/components/routes/app/results/ItemTile.js b/src/components/routes/app/results/ItemTile.js
@@ -46,7 +46,7 @@ class ItemTile extends Component {
                     </div>
                     <ul className="resource--info-lines">
                         <li className="top">
-                            <div className="grid_container info">
+                            <div className="flex-container info">
                                 <div>
                                     <div className={difficultyClass}></div>
                                 </div>
@@ -59,15 +59,14 @@ class ItemTile extends Component {
                                     </div>
                                 </div>
                             </div>
+                            <span>Author:</span> {resource.author}
                         </li>
 
                         {linkitem}
                         <li className="description">
                         {resource.description}
                         </li>
-                        <li>
-                            <span className="key">Author:</span> {resource.author}
-                        </li>
+
                         <li>
                             <span className="label">{resource.tags}</span>
                         </li>