Merge pull request #1148 from ubyssey/1147-fix-visual-issues-in-the-m…

…obile-view-Akshanjay 1147 fix visual issues in the mobile view akshanjay
ubyssey · Jul 18, 2023 · 475c21f · 475c21f
2 parents a1920b2 + 92f574b
commit 475c21f
Show file tree

Hide file tree

Showing 8 changed files with 54 additions and 36 deletions.
diff --git a/ads/templatetags/ubyssey_ad_tags.py b/ads/templatetags/ubyssey_ad_tags.py
@@ -22,7 +22,7 @@ def gpt_placement_tag (slug) -> dict:
         }
 
 @register.inclusion_tag('ads/gpt_define_tag.html')
-def gpt_define_tag(slug) -> dict:
+def gpt_define_tag(slug, is_mobile=False) -> dict:
     try:
         ad_slot = AdSlot.objects.get(slug=slug)
         SIZES = {
@@ -32,11 +32,18 @@ def gpt_define_tag(slug) -> dict:
             'leaderboard': '[[728, 90], [970, 90]]',
             'mobile-leaderboard': '[300, 50]'
         }
-        return {
-            'div_id' : ad_slot.div_id,
-            'dfp' : ad_slot.dfp,
-            'size' : SIZES[ad_slot.size],
-        }
+        if is_mobile and "Intra_Article" in ad_slot.dfp:
+            return {
+                'div_id' : ad_slot.div_id,
+                'dfs' : ad_slot.dfs,
+                'size' : SIZES['mobile-leaderboard'],
+            }
+        else:
+            return {
+                'div_id' : ad_slot.div_id,
+                'dfp' : ad_slot.dfp,
+                'size' : SIZES[ad_slot.size],
+            }
     except:
         return {
             'div_id' : 'ad-tag-error',

diff --git a/article/templates/article/article_page.html b/article/templates/article/article_page.html
@@ -9,7 +9,7 @@
 {% block head_scripts %}
     <!-- Register ads for article page -->
     {% for orderable in settings.ads.AdTagSettings.article_head_tags.all %}
-        {% gpt_define_tag orderable.ad_slot %}
+        {% gpt_define_tag orderable.ad_slot is_mobile %}
     {% endfor %}
 {% endblock %}
 

diff --git a/article/templates/article/article_page_magazine_2023.html b/article/templates/article/article_page_magazine_2023.html
@@ -40,7 +40,7 @@
     {% block banner_ad %}
     <!-- Article Page header ads go here -->
         {% for orderable in settings.ads.AdTagSettings.article_header_placements.all %}
-            {% gpt_placement_tag orderable.ad_slot %}
+            {% gpt_define_tag orderable.ad_slot is_mobile %}
         {% endfor %}
     {% endblock %}
 

diff --git a/article/templates/article/objects/darkmode_button.html b/article/templates/article/objects/darkmode_button.html
@@ -1,7 +1,7 @@
 <meta name="color-scheme" content="light">
 
 <button class="theme-toggle dark-mode-switcher" id="theme-toggle" title="Toggles light & dark" aria-label="auto" aria-live="polite">
-  <svg class="sun-and-moon" aria-hidden="true" width="24" height="24" viewBox="0 0 24 24">
+  <svg class="sun-and-moon" aria-hidden="true" width="1.75em" height="1.75em" viewBox="0 0 24 24">
     <mask class="moon" id="moon-mask">
       <rect x="0" y="0" width="100%" height="100%" fill="white" />
       <circle cx="24" cy="10" r="6" fill="black" />

diff --git a/article/templates/article/objects/share_bar.html b/article/templates/article/objects/share_bar.html
@@ -1,9 +1,9 @@
 
 
 <span class="c-share-buttons" style="">
-    <a href="#" class="share-facebook c-share_space"><i class="fa fa-facebook fa--xx" aria-hidden="true"></i></a>
-    <a href="#" class="share-twitter c-share_space"><i class="fa fa-twitter fa-x" aria-hidden="true"></i></a>
-    <a href="#" class="share-reddit c-share_space"><i class="fa fa-reddit fa-x" aria-hidden="true"></i></a>
-    <a href="#" class="share-link c-share_space"><i class="fa fa-link fa-x" aria-hidden="true"><span id="custom-tooltip">copied!</span></i></a> 
+    <a href="#" class="share-facebook c-share_space"><i class="fa fa-facebook fa-xx" aria-hidden="true"></i></a>
+    <a href="#" class="share-twitter c-share_space"><i class="fa fa-twitter fa-xx" aria-hidden="true"></i></a>
+    <a href="#" class="share-reddit c-share_space"><i class="fa fa-reddit fa-xx" aria-hidden="true"></i></a>
+    <a href="#" class="share-link c-share_space"><i class="fa fa-link fa-xx" aria-hidden="true"><span id="custom-tooltip">copied!</span></i></a> 
     <textarea class="visuallyhidden" id="box"></textarea>
 </span>
diff --git a/ubyssey/static_src/src/styles/modules/_darkmode.scss b/ubyssey/static_src/src/styles/modules/_darkmode.scss
@@ -1,18 +1,12 @@
 @import 'variables';
 
 .dark-mode-switcher {
-    border: transparent;
-    padding: 4px;
-    background: transparent;
-    cursor: pointer;
-  }
-
-.sun-and-moon{
-  height: 1.5em;
-  position: relative;
-  top: -5px;
-}  
-
+  border: transparent;
+  padding: 0px 4px 4px 4px;
+  background: transparent;
+  cursor: pointer;
+  float: right;
+}
 .sun-and-moon > :is(.moon, .sun, .sun-beams) {
     transform-origin: center;
 }
@@ -36,7 +30,7 @@
 }
 
 [color-css-theme="dark"] .sun-and-moon > .sun {
-    transform: scale(1.75);
+    transform: scale(1.5);
 }
 
 [color-css-theme="dark"] .sun-and-moon > .sun-beams {

diff --git a/ubyssey/static_src/src/styles/modules/article/_base.scss b/ubyssey/static_src/src/styles/modules/article/_base.scss
@@ -118,6 +118,12 @@ div.indicator {
     flex: 1 0;
     margin-bottom: 0.5em;
   }
+
+  @media($bp-smaller-than-tablet) {
+    display: inline-block;
+    width: 100%;
+  }
+
 }
 
 .c-article_byline_fw {
@@ -132,21 +138,17 @@ div.indicator {
 .c-authors_bio_meta {
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
+  border-bottom: 1px solid #D2D2D2;
   font-family: $font-default;
   font-size: $font-size-15px;
   // font-weight: $font-weight-semi-bold;
   font-weight: $font-weight-bold;
 
-  display: block;
+  display: flex;
   position: relative;
-
-  @media($bp-larger-than-tablet) {
-    border-bottom: 1px solid #D2D2D2;
-    display: flex;
-    flex: 1 0;
-    line-height: 2rem;
-    margin-bottom: 0;
-  }
+  flex: 1 0;
+  line-height: 2rem;
+  margin-bottom: 0;
 }
 
 
@@ -187,6 +189,11 @@ div.indicator {
   padding: 0.5em 2em 0.5em 0em;
   display: flex;
   text-align: center;
+
+  @media($bp-larger-than-tablet) {
+    padding: 1rem;
+  }
+
 }
 
 .author_title {
@@ -301,6 +308,7 @@ div.indicator {
 
 .c-share-buttons {
   float: left;
+  padding: 0px 4px 0px 4px;
   color: $DM-SH-button;
 }
 

diff --git a/ubyssey/static_src/src/styles/modules/article/_full_width.scss b/ubyssey/static_src/src/styles/modules/article/_full_width.scss
@@ -15,7 +15,7 @@
       padding-bottom: 1rem;
       display: table;
       border-bottom: 1px solid #E4E4E4;
-      @media($bp-larger-than-tablet) {
+      @media($bp-smaller-than-tablet) {
         padding-bottom: 1.5rem;
       }
     }
@@ -29,14 +29,23 @@
     .left, .right {
       display: table-cell;
       box-sizing: border-box;
+      @media($bp-smaller-than-tablet) {
+        display: inline-block;
+      }
     }
     .left {
       width: 50%;
       padding: 25px 10%;
       vertical-align: middle;
+      @media($bp-smaller-than-tablet) {
+        width: 100%;
+      }
     }
     .right {
       width: 50%;
+      @media($bp-smaller-than-tablet) {
+        width: 100%;
+      }
     }
 
     // sidebar