feat: Display event logo in public event page (#4864)

iamareebjamal · web-flow · commit 894ab2db3785 · 2020-08-25T12:42:14.000+05:30
diff --git a/app/styles/pages/public-event.scss b/app/styles/pages/public-event.scss
@@ -20,7 +20,7 @@
       top: 0;
     }
 
-    > img {
+    > img.background {
       bottom: 0;
       left: 0;
       position: absolute;
@@ -39,7 +39,7 @@
       right: 0;
       width: 100%;
 
-      img {
+      img.background {
         left: 0;
         position: absolute;
         right: 0;
@@ -56,9 +56,16 @@
         width: 100%;
 
         .info {
+          align-items: center;
           bottom: 20%;
+          flex-wrap: wrap;
           position: absolute;
 
+          .logo {
+            max-height: 100px;
+            max-width: 300px;
+          }
+
           .event {
             font-weight: 300;
           }
@@ -106,6 +113,12 @@
             }
           }
         }
+
+        @media (max-width: 550px) {
+          .info {
+            bottom: 5%;
+          }
+        }
       }
     }
   }
diff --git a/app/styles/partials/utils.scss b/app/styles/partials/utils.scss
@@ -80,3 +80,7 @@
 .mr-2 {
   margin-right: .5rem !important;
 }
+
+.mr-8 {
+  margin-right: 2rem !important;
+}
diff --git a/app/templates/public.hbs b/app/templates/public.hbs
@@ -1,12 +1,14 @@
 <UnverifiedUserMessage />
 <div class="public-event ui relaxed grid">
   <div class="sixteen wide column lead {{if this.smallLead 'small'}}">
-    <Widgets::SafeImage @src={{if this.model.largeImageUrl this.model.largeImageUrl this.model.originalImageUrl}} />
+    <Widgets::SafeImage class="background" @src={{if this.model.largeImageUrl this.model.largeImageUrl this.model.originalImageUrl}} />
     <div class="content">
       <div class="ui container">
-        <div class="ui grid info">
-          <div class="one wide column"></div>
-          <div class="fifteen wide column">
+        <div class="ui info d-flex">
+          {{#if this.model.logoUrl}}
+            <img src="{{this.model.logoUrl}}" class="logo mr-8" />
+          {{/if}}
+          <div>
             <h4 class="event time">{{header-date this.model.startsAt this.model.timezone}}</h4>
             {{#if this.displayEndDate}}
               <h5 class="event time ends">{{t 'To'}} {{header-date this.model.endsAt this.model.timezone}}</h5>

Original file line number	Diff line number	Diff line change
`@@ -20,7 +20,7 @@`
`20`	`20`	`top: 0;`
`21`	`21`	`}`
`22`	`22`
`23`		`- > img {`
	`23`	`+ > img.background {`
`24`	`24`	`bottom: 0;`
`25`	`25`	`left: 0;`
`26`	`26`	`position: absolute;`
`@@ -39,7 +39,7 @@`
`39`	`39`	`right: 0;`
`40`	`40`	`width: 100%;`
`41`	`41`
`42`		`- img {`
	`42`	`+ img.background {`
`43`	`43`	`left: 0;`
`44`	`44`	`position: absolute;`
`45`	`45`	`right: 0;`
`@@ -56,9 +56,16 @@`
`56`	`56`	`width: 100%;`
`57`	`57`
`58`	`58`	`.info {`
	`59`	`+ align-items: center;`
`59`	`60`	`bottom: 20%;`
	`61`	`+ flex-wrap: wrap;`
`60`	`62`	`position: absolute;`
`61`	`63`
	`64`	`+ .logo {`
	`65`	`+ max-height: 100px;`
	`66`	`+ max-width: 300px;`
	`67`	`+ }`
	`68`	`+`
`62`	`69`	`.event {`
`63`	`70`	`font-weight: 300;`
`64`	`71`	`}`
`@@ -106,6 +113,12 @@`
`106`	`113`	`}`
`107`	`114`	`}`
`108`	`115`	`}`
	`116`	`+`
	`117`	`+ @media (max-width: 550px) {`
	`118`	`+ .info {`
	`119`	`+ bottom: 5%;`
	`120`	`+ }`
	`121`	`+ }`
`109`	`122`	`}`
`110`	`123`	`}`
`111`	`124`	`}`
Original file line number	Diff line number	Diff line change
`@@ -80,3 +80,7 @@`
`80`	`80`	`.mr-2 {`
`81`	`81`	`margin-right: .5rem !important;`
`82`	`82`	`}`
	`83`	`+`
	`84`	`+.mr-8 {`
	`85`	`+ margin-right: 2rem !important;`
	`86`	`+}`