Merge pull request #109 from isubit/INTERIM-28

INTERIM-28 Improve grid styling

css/suitcase.css

@@ -1615,45 +1615,38 @@ span.date-display-single {
 }
 
 /* -------------------- */
-/* Grid for Views */
+/* ## VIEWS - FLEXGRID
+/* -------------------- */
 
-.luggage-grid .view-content > h3 {
-    display: block;
-    padding: 5px;
-    color: #444444;
-    font-size: 20px;
-    font-weight: 700;
-    clear: both;
+.luggage-grid .view-content {
+    display: flex;
+    flex-flow: wrap;
 }
 
-.luggage-grid .luggage-gridrow {
-    height: auto; width: 100%;
-    margin: 0 0.25% 8px 0.25%;
-    padding: 1em;
-    float: left;
-    overflow: hidden;
+.luggage-gridrow,
+.luggage-gridrow3,
+.luggage-gridrow4 {
     background: rgba(255, 255, 255, 0.7);
-    border: 1px solid #dddddd;
+    box-sizing: border-box;
+    padding: 15px;
+    margin: 0 0.7%;
+    outline: 1px solid #ddd;
+    flex: 0 0 100%;
 }
 
-.luggage-grid .luggage-gridrow .views-field img {
-    margin: 2.5px 15px 2.5px 2.5px;
+.luggage-gridrow img,
+.luggage-gridrow3 img,
+.luggage-gridrow4 img {
     float: left;
+    padding: 5px 5px 0 0;
 }
 
-.luggage-grid .luggage-gridrow .views-field-title {
-    font-size: 1.1em;
+.luggage-grid .view-content > h3 {
+    padding: 5px;
+    color: #444444;
+    font-size: 20px;
     font-weight: 700;
-}
-
-.luggage-grid .luggage-gridrow .luggage-gridgreen {
-    margin-bottom: 16px;
-}
-
-.luggage-grid .luggage-gridrow .luggage-gridgreen,
-.luggage-grid .luggage-gridrow .luggage-gridgreen a {
-    font-style: italic;
-    color: rgb(36, 109, 73);
+    width: 100%;
 }
 
 /* -------------------- */

css/suitcase_responsive.css

@@ -106,12 +106,6 @@
     .flexslider {
         display: block;
     }
-
-
-    .luggage-grid .luggage-gridrow {
-        width: 49.5%;
-    }
-
 }
 
 @media all and (max-width: 739px) {
@@ -332,3 +326,32 @@
     }
 
 }
+
+@media only screen and (min-width: 769px) {
+    .luggage-gridrow,
+    .luggage-gridrow3,
+    .luggage-gridrow4 {
+        flex-basis: 48.6%;
+        min-width: 48.6%;
+    }
+}
+
+@media only screen and (min-width: 1024px) {
+    .luggage-gridrow4 {
+        flex-basis: 23.5%;
+        min-width: 23.5%;
+    }
+}
+
+@media only screen and (min-width: 1024px) {
+    .luggage-gridrow3 {
+        flex-basis: 31.3%;
+        min-width: 31.3%;
+    }
+
+    .luggage-gridrow3 .views-field-field-uri-1,
+    .luggage-gridrow4 .views-field-field-uri-1 {
+        overflow-wrap: break-word;
+        word-wrap: break-word;
+    }
+}

suitcase_interim.info

@@ -85,7 +85,6 @@ settings[alpha_libraries][omega_equalheights] = ''
 settings[alpha_libraries][suitcase_formalize] = 'suitcase_formalize'
 settings[alpha_libraries][suitcase_facet] = 'suitcase_facet'
 settings[alpha_libraries][suitcase_sticky_menu] = 'suitcase_sticky_menu'
-settings[alpha_libraries][suitcase_gridheight] = 'suitcase_gridheight'
 settings[alpha_libraries][suitcase_jquery_smart_menu] = 'suitcase_jquery_smart_menu'
 settings[alpha_libraries][suitcase_smart_menu_init] = 'suitcase_smart_menu_init'
 settings[alpha_libraries][suitcase_image_floats] = 'suitcase_image_floats'
@@ -392,10 +391,6 @@ libraries[suitcase_sticky_menu][name] = 'Suitcase Sticky menu'
 libraries[suitcase_sticky_menu][description] = 'Sticks the menu to the top of screen when scrolling past the menu position.'
 libraries[suitcase_sticky_menu][js][0][file] = 'suitcase_sticky_menu.js'
 libraries[suitcase_sticky_menu][js][0][options][weight] = '-20'
-libraries[suitcase_gridheight][name] = 'Suitcase Grid Height'
-libraries[suitcase_gridheight][description] = 'Provides a javascript library that makes grid items the same height'
-libraries[suitcase_gridheight][js][0][file] = 'suitcase_gridheight.js'
-libraries[suitcase_gridheight][js][0][options][weight] = '-20'
 libraries[suitcase_jquery_smart_menu][name] = 'jQuery SmartMenus'
 libraries[suitcase_jquery_smart_menu][description] = 'Provides dropdown menus'
 libraries[suitcase_jquery_smart_menu][js][0][file] = 'jquery.smartmenus.min.js'