issue DrupalRU#1068: Adds image style to views and less-code for even…

…ts pages
avakorin · Aug 4, 2018 · f03ead6 · f03ead6
1 parent 00e75b8
commit f03ead6
Show file tree

Hide file tree

Showing 7 changed files with 101 additions and 14 deletions.
diff --git a/profiles/drupalru/themes/druru/css/style.css b/profiles/drupalru/themes/druru/css/style.css
diff --git a/profiles/drupalru/themes/druru/less/drupal/components/_event.less b/profiles/drupalru/themes/druru/less/drupal/components/_event.less
@@ -14,6 +14,7 @@
     .image {
       margin-bottom: @padding-base-vertical;
     }
+
     > * {
       margin-bottom: @padding-small-vertical;
 
@@ -36,15 +37,19 @@
 					float: left;
         }
       }
+
       &.image {
         margin-bottom: @padding-large-vertical;
       }
+
       &.website:before {
         content: "\f0c1";
       }
+
       &.address:before {
         content: "\f041";
       }
+
       &.event-type {
         &:before {
           content: "\f05a";
@@ -53,26 +58,24 @@
           display: inline;
         }
       }
+
       &.date_time {
         &:before {
           content: "\f073";
         }
+
         a > * {
           margin-right: @padding-small-horizontal;
           display: inline;
         }
       }
     }
   }
+
   .details {
     margin-left: 0;
   }
-  .image {
-    img {
-      max-width: 100%;
-      height: auto;
-    }
-  }
+
   .event-type {
     margin-top: 5px;
   }

diff --git a/profiles/drupalru/themes/druru/less/drupal/components/_pages.less b/profiles/drupalru/themes/druru/less/drupal/components/_pages.less
@@ -167,4 +167,52 @@ body {
       }
     }
   }
+
+  &.page-events {
+    @timeline-width: 96px;
+    @point-size: 13px;
+
+    .node-event {
+      img {
+        max-width: 100%;
+        height: auto;
+      }
+
+      // Temp workaround to prevent embedded videos from overlapping container
+      // @todo: Refactor embedding of external videos
+      // see https://getbootstrap.com/docs/3.3/components/#responsive-embed
+      iframe {
+        max-width: 100%;
+      }
+    }
+
+    @media @tablet {
+      #block-system-main {
+        padding-left: @grid-gutter-width*2;
+        margin-left: @timeline-width;
+        border-left: 1px solid @brand-info;
+      }
+
+      .event-date {
+        position: absolute;
+        left: -(@timeline-width + (@grid-gutter-width*2.5) - (@well-padding-lg-horizontal/2) + (@point-size/2)-1px);
+        line-height: 1.3em;
+        font-size: 0.5em;
+        color: @brand-accent;
+
+        &:after {
+          display: block;
+          content: '';
+          position: absolute;
+          width: @point-size;
+          height: @point-size;
+          border-radius: 50%;
+          border: 1px solid;
+          right: -35px;
+          top: .3em;
+          background: @body-bg;
+        }
+      }
+    }
+  }
 }
diff --git a/profiles/drupalru/themes/druru/less/drupal/modules/_views.less b/profiles/drupalru/themes/druru/less/drupal/modules/_views.less
@@ -2,9 +2,11 @@
   .views-row {
     border-bottom: 1px solid #e6e6e6;
     border-top: 1px solid #fff;
+
     &:last-child {
       border-bottom: none;
     }
+
     &:first-child {
       border-top: none;
     }
@@ -15,6 +17,7 @@
   .row-title {
     float: left;
     width: 90%;
+
     > a {
       text-overflow: ellipsis;
       white-space: nowrap;
@@ -23,22 +26,26 @@
       max-width: 100%;
       float: left;
     }
+
     > sup + a {
       padding-right: 3px;
       max-width: 75%;
     }
+
     @media @phone {
       width: 95%;
       > sup + a {
         max-width: 85%;
       }
     }
+
     @media @tablet {
       width: 97%;
       > sup + a {
         max-width: 93%;
       }
     }
+
     @media @very-smalld {
       width: 91%;
       > sup + a {
@@ -67,4 +74,4 @@
       }
     }
   }
-}
+}
diff --git a/sites/all/modules/custom/drurum/includes/views/events-past-page.inc b/sites/all/modules/custom/drurum/includes/views/events-past-page.inc
@@ -36,7 +36,7 @@ $handler->display->display_options['fields']['field_event_image']['label'] = '';
 $handler->display->display_options['fields']['field_event_image']['element_label_colon'] = FALSE;
 $handler->display->display_options['fields']['field_event_image']['click_sort_column'] = 'fid';
 $handler->display->display_options['fields']['field_event_image']['settings'] = array(
-  'image_style' => '',
+  'image_style' => 'event_teaser',
   'image_link' => 'content',
 );
 /* Field: Content: Title */

diff --git a/sites/all/modules/custom/drurum/includes/views/events-upcoming-block.inc b/sites/all/modules/custom/drurum/includes/views/events-upcoming-block.inc
@@ -36,7 +36,7 @@ $handler->display->display_options['fields']['field_event_image']['label'] = '';
 $handler->display->display_options['fields']['field_event_image']['element_label_colon'] = FALSE;
 $handler->display->display_options['fields']['field_event_image']['click_sort_column'] = 'fid';
 $handler->display->display_options['fields']['field_event_image']['settings'] = array(
-  'image_style' => '',
+  'image_style' => 'event_teaser',
   'image_link' => 'content',
 );
 /* Field: Content: Title */

diff --git a/sites/all/modules/custom/drurum/includes/views/events-upcoming-page.inc b/sites/all/modules/custom/drurum/includes/views/events-upcoming-page.inc
@@ -36,7 +36,7 @@ $handler->display->display_options['fields']['field_event_image']['label'] = '';
 $handler->display->display_options['fields']['field_event_image']['element_label_colon'] = FALSE;
 $handler->display->display_options['fields']['field_event_image']['click_sort_column'] = 'fid';
 $handler->display->display_options['fields']['field_event_image']['settings'] = array(
-  'image_style' => '',
+  'image_style' => 'event_teaser',
   'image_link' => 'content',
 );
 /* Field: Content: Title */