Improve Member DB event add form styles

Styles now look good in mobile view. Simplified css as well, was
able to use a lot more concise styles to produce the same result.
Labels vertical position of word makes a lot more sense now.

diff --git a/parts/glm-members-only-top-bar.php b/parts/glm-members-only-top-bar.php
index bb67f35..0207260 100644 (file)
--- a/parts/glm-members-only-top-bar.php
+++ b/parts/glm-members-only-top-bar.php
@@ -2,7 +2,7 @@
     <div class='glm-member-greeting'>Hello,     <?php $current_user = wp_get_current_user();echo $current_user->user_login ?>.</div>
     <a class='button glm-button' href="<?php echo wp_logout_url( home_url() ); ?>">Logout</a>
     <?php if (current_user_can("glm_members_member")) { ?>
-        <?php apply_filters('glm_associate_terms', $glmAssociateTerms);?>
+        <?php $glmAssociateTerms = apply_filters('glm_associate_terms', "");?>
         <a class='button glm-button' href='<?php echo get_admin_url() ?>admin.php?page=glm-members-admin-menu-member'>Enter <?php echo $glmAssociateTerms['term_member_cap']; ?> Admin Area</a>                        
     <?php } ?>
 </div>
\ No newline at end of file

diff --git a/scss/plugins/_glm-member-db-events.scss b/scss/plugins/_glm-member-db-events.scss
index db44346..5ee240e 100644 (file)
--- a/scss/plugins/_glm-member-db-events.scss
+++ b/scss/plugins/_glm-member-db-events.scss
@@ -151,11 +151,6 @@ $eventMonthColor         : $d-blue;
 .detail-search-form{
     width: 100% !important;
 }
-#frontForm #newEvent {
-    background-color: $red;
-    padding: 0.4em 0.8em;
-    border-radius: 4px;
-}
 .event-types-label, .beer-types-label, .venues-label, .brewery-label{
     color: #B4D433;
 
@@ -175,3 +170,78 @@ form#glm-member-event-search .glm-search-icon{
     color: #B4D433 !important;
 
 }
+#frontForm #newEvent {
+    background-color: $red;
+    padding: 0.6em 1.2em;
+    border-radius: 4px;
+    display: block;
+    margin: 0 auto;
+}
+.glm-event-table tbody {
+    background-color: $light-tan;
+}
+.glm-event-table tr.even, 
+.glm-event-table tr.alt, 
+.glm-event-table tr:nth-of-type(2n) {
+    background-color: rgba(0,0,0,0.05);
+}
+.glm-add-event-form-wrapper {
+    border: 1px solid white;
+    color: black;
+    background-color: $light-tan;
+    width: 100%;
+    display: table;
+    margin-bottom: 20px;
+    @media #{$medium-down} {
+        max-width: 600px;
+        margin: 0 auto 20px;
+    }
+    .glm-add-event-form-item {
+        clear: both;
+        display: block;
+        position: relative;
+        border: 1px solid white;
+        @media #{$large-up} {
+            display: -ms-flex; display: -webkit-flex; display: flex;
+        }
+    }
+    .glm-add-event-form-item:nth-of-type(2n) {
+        background-color: rgba(0, 0, 0, 0.05);
+    }
+    .glm-add-event-form-label {
+        float: left;
+        position: relative;
+        @media #{$large-up} {
+            width: 30%;
+        }
+        @media #{$medium-down} {
+            width: 100%;
+            clear: both;
+        }
+        label {
+            padding: 10px;
+            @media #{$large-up} {
+            }
+            @media #{$medium-down} {
+                padding-bottom: 0;
+            }
+        }
+    }
+    .glm-add-event-form-data {
+/*        min-height: 60px;*/
+        position: relative;
+        @media #{$large-up} {
+            padding: 10px;
+            width: 70%;
+            float: right;
+            border-left: 1px solid white;
+            border-right: 1px solid white;
+        }
+        @media #{$medium-down} {
+            padding: 0 10px 10px;
+            width: 100%;
+            clear: both;
+            padding-top: 4px;
+        }
+    }
+}

diff --git a/scss/plugins/_glm-member-db.scss b/scss/plugins/_glm-member-db.scss
index d1d9230..ab8b5eb 100644 (file)
--- a/scss/plugins/_glm-member-db.scss
+++ b/scss/plugins/_glm-member-db.scss
@@ -187,14 +187,6 @@ body {
     .glm-button {
         background-color: $red;
     }
-    .glm-event-table tbody {
-        background-color: $light-tan;
-    }
-    .glm-event-table tr.even, 
-    .glm-event-table tr.alt, 
-    .glm-event-table tr:nth-of-type(2n) {
-        background-color: rgba(0,0,0,0.05);
-    }
     .breadcrumbs {
         background-color: transparent;
         display: none;