Fix minimum height of guide if empty content(#42) : myreaction, creator

HyunSangHan · May 3, 2020 · 5bfc9c1 · 5bfc9c1
1 parent 6a6d135
commit 5bfc9c1
Show file tree

Hide file tree

Showing 6 changed files with 415 additions and 381 deletions.
diff --git a/feedpage/static/feedpage/common.scss b/feedpage/static/feedpage/common.scss
@@ -48,6 +48,17 @@ span > a {
   color: black;
 }
 
+main {
+  &.mdl-layout__content {
+    &.white {
+      padding: 64px 0 50px;
+    }
+    &.black {
+      padding: 0 0 50px;
+    }
+  }
+}
+
 .hr-scroll {
   white-space: nowrap;
   overflow: overlay;
@@ -80,6 +91,12 @@ label > div:hover {
   width: 100%;
   margin-left: auto;
   margin-right: auto;
+
+  &.creator {
+    display: flex;
+    flex-flow: column;
+    min-height: calc(100vh - 314px);
+  }
 }
 
 .container-full {

diff --git a/feedpage/static/feedpage/partial.css b/feedpage/static/feedpage/partial.css
@@ -135,6 +135,13 @@
   text-align: center;
 }
 
+.contents.my.empty {
+  display: flex;
+  min-height: 0;
+  width: 100%;
+  padding: 0 0 50px;
+}
+
 .page-content-black {
   height: 200px;
 }

diff --git a/feedpage/static/feedpage/responsive.css b/feedpage/static/feedpage/responsive.css
@@ -13,7 +13,9 @@
   }
 
   .contents.my {
-    padding: 20px 3% 50px;
+    width: 94%;
+    flex-grow: 1;
+    padding: 20px 3% 0;
   }
 
   .comments-input-w {
@@ -76,7 +78,9 @@
   }
 
   .contents.my {
-    padding: 25px 40px 40px;
+    width: calc(100% - 80px);
+    flex-grow: 1;
+    padding: 25px 40px 0;
   }
 
   .comments-input-w {
@@ -86,12 +90,12 @@
     padding-bottom: 9px;
   }
   .contents.noti {
-    padding-top: 70px !important;
+    padding: 70px 0 0;
   }
 
   .more-info {
     position: absolute;
-    right: calc(50% - 235px);
+    right: calc(4% + 40px);
     top: auto;
     margin-top: -26px;
     margin-right: 20px;
@@ -146,7 +150,9 @@
   }
 
   .contents.my {
-    padding: 30px 40px 40px;
+    width: calc(100% - 80px);
+    flex-grow: 1;
+    padding: 30px 40px 0;
   }
 
   .comments-input-w {
@@ -157,7 +163,7 @@
   }
 
   .contents.noti {
-    padding-top: 70px !important;
+    padding: 70px 0 0;
   }
 
   .container {

diff --git a/feedpage/templates/base_black.html b/feedpage/templates/base_black.html
@@ -41,7 +41,7 @@
           </form>
         </div>
       </header>
-      <main class="mdl-layout__content w-100 mt-16">
+      <main class="mdl-layout__content black w-100 mt-16">
         {% block content %}
         {% endblock %}
       </main>

diff --git a/feedpage/templates/feedpage/creator.html b/feedpage/templates/feedpage/creator.html
@@ -60,7 +60,7 @@
   </div>
 </div>
 <!--피드 나오는 영역-->
-<div class="container">
+<div class="container creator">
 <!--투탭-->
   {% if request.user == creator %}
     <div class="page-content-two-tabs w-100">
@@ -78,7 +78,7 @@
   {% endif %}
 <!--피드 나오는 영역 / 피드 없을 때-->
   {% if not has_feeds %}
-    <div class="m-auto contents my" style="min-height: 40vh; display: flex !important; display: -webkit-flex !important; display: -ms-flexbox !important;">
+    <div class="m-auto contents my empty">
       <div class="contents-margin w-100 h-100 flex-center font-15">
         {% if creator == user %}
           <div class="text-center">