refactor css, fix design issues

webapp/components/ContributionForm/ContributionForm.vue

@@ -10,7 +10,7 @@
       <hc-teaser-image
         :contribution="contribution"
         @addTeaserImage="addTeaserImage"
-        :class="{ 'images-set-blur': blurImage }"
+        :class="{ '--blur-image': blurImage }"
         @addImageAspectRatio="addImageAspectRatio"
       >
         <img
@@ -20,9 +20,8 @@
         />
       </hc-teaser-image>
 
-      <div style="clear: both" />
       <ds-card>
-        <ds-text align="right">
+        <div class="blur-toggle">
           <label for="blur-img">{{ $t('contribution.shockingPicture') }}</label>
           <input
             name="checkbox"
@@ -32,16 +31,12 @@
             v-model="blurImage"
             @change="form.checkbox = blurImage"
           />
+          <a href="https://faq.human-connection.org/" target="_blank" class="link">
+            {{ $t('contribution.shockingPicture-text') }}
+            <ds-icon name="question-circle" />
+          </a>
+        </div>
 
-          <div>
-            <a href="https://faq.human-connection.org/" target="_blank">
-              <small>
-                {{ $t('contribution.shockingPicture-text') }}
-                <ds-icon name="question-circle" />
-              </small>
-            </a>
-          </div>
-        </ds-text>
         <ds-space />
         <client-only>
           <hc-user :user="currentUser" :trunc="35" />
@@ -312,42 +307,34 @@ export default {
 </script>
 
 <style lang="scss">
-.images-set-blur.ds-card-image img {
-  -webkit-filter: blur(32px);
-  -moz-filter: blur(32px);
-  -ms-filter: blur(32px);
-  -o-filter: blur(32px);
-  filter: blur(32px);
-  -webkit-transition: all ease 0.2s;
-  -moz-transition: all ease 0.2s;
-  -ms-transition: all ease 0.2s;
-  -o-transition: all ease 0.2s;
-  transition: all ease 0.2s;
-}
-</style>
-
-<style lang="scss" scoped>
-.smallTag {
-  width: 100%;
-  position: relative;
-  left: 90%;
-}
-.post-title {
-  margin-top: $space-x-small;
-  margin-bottom: $space-xx-small;
-
-  input {
-    border: 0;
-    font-size: $font-size-x-large;
-    font-weight: bold;
-    padding-left: 0;
-    padding-right: 0;
-  }
-}
-
 .contribution-form {
+  .ds-card-image.--blur-image img {
+    filter: blur(32px);
+  }
+
+  .blur-toggle {
+    text-align: right;
+
+    > .link {
+      display: block;
+    }
+  }
+
   .ds-chip {
     cursor: default;
   }
+
+  .post-title {
+    margin-top: $space-x-small;
+    margin-bottom: $space-xx-small;
+
+    input {
+      border: 0;
+      font-size: $font-size-x-large;
+      font-weight: bold;
+      padding-left: 0;
+      padding-right: 0;
+    }
+  }
 }
 </style>

webapp/components/PostCard/PostCard.vue

@@ -5,8 +5,8 @@
     :class="{
       'post-card': true,
       'disabled-content': post.disabled,
-      'post--pinned': isPinned,
+      '--pinned': isPinned,
-      'images-set-blur': post.blurImage,
+      '--blur-image': post.blurImage,
     }"
   >
     <!-- Post Link Target -->
@@ -157,22 +157,26 @@ export default {
   },
 }
 </script>
-<style scoped lang="scss">
+<style lang="scss">
-.ds-card-image img {
-  width: 100%;
-  max-height: 2000px;
-  object-fit: contain;
-  -o-object-fit: cover;
-  object-fit: cover;
-  -o-object-position: center;
-  object-position: center;
-}
-
 .post-card {
-  cursor: pointer;
+  justify-content: space-between;
   position: relative;
   z-index: 1;
-  justify-content: space-between;
+  cursor: pointer;
+
+  &.--pinned {
+    border: 1px solid $color-warning;
+  }
+
+  &.--blur-image > .ds-card-image img {
+    filter: blur(22px);
+  }
+
+  > .ds-card-image img {
+    width: 100%;
+    max-height: 2000px;
+    object-fit: contain;
+  }
 
   > .ds-card-content {
     flex-grow: 0;
@@ -205,8 +209,4 @@ export default {
     text-indent: -999999px;
   }
 }
-
-.post--pinned {
-  border: 1px solid $color-warning;
-}
 </style>

webapp/components/TeaserImage/TeaserImage.vue

@@ -142,7 +142,7 @@ export default {
 <style lang="scss">
 #postdropzone {
   width: 100%;
-  min-height: 500px;
+  min-height: 400px;
   background-color: $background-color-softest;
 }
 

webapp/pages/post/_id/_slug/index.vue

@@ -5,34 +5,15 @@
       v-if="post && ready"
       :image="post.image | proxyApiUrl"
       :class="{
-        'post-card': true,
+        'post-page': true,
         'disabled-content': post.disabled,
-        'images-set-blur': blurred,
+        '--blur-image': blurred,
       }"
     >
-      <ds-text v-show="post.blurImage" align="right" class="blurBox">
+      <aside v-show="post.blurImage" class="blur-toggle">
-        <img
+        <img v-show="blurred" :src="post.image | proxyApiUrl" class="preview" />
-          v-show="blurred"
+        <ds-button :icon="blurred ? 'eye' : 'eye-slash'" primary @click="blurred = !blurred" />
-          :src="post.image | proxyApiUrl"
+      </aside>
-          class="blur-img-preview"
-          @click.prevent="unBlur"
-        />
-        <ds-button
-          v-if="blurred"
-          class="bluricon-post"
-          icon="eye-slash"
-          primary
-          @click.prevent="blurred = false"
-        ></ds-button>
-        <ds-button
-          v-else
-          class="bluricon-post"
-          icon="eye"
-          primary
-          @click.prevent="blurred = true"
-        ></ds-button>
-      </ds-text>
-      <div style="clear: both" />
       <hc-user :user="post.author" :date-time="post.createdAt">
         <template v-slot:dateTime>
           <ds-text v-if="post.createdAt !== post.updatedAt">({{ $t('post.edited') }})</ds-text>
@@ -235,75 +216,69 @@ export default {
 }
 </script>
 <style lang="scss">
-.images-set-blur .ds-card-image {
+.post-page {
-  -webkit-filter: blur(22px);
+  &.--blur-image > .ds-card-image img {
-  -moz-filter: blur(22px);
+    filter: blur(22px);
-  -ms-filter: blur(22px);
+  }
-  -o-filter: blur(22px);
-  filter: blur(22px);
-  -webkit-transition: all ease 0.2s;
-  -moz-transition: all ease 0.2s;
-  -ms-transition: all ease 0.2s;
-  -o-transition: all ease 0.2s;
-  transition: all ease 0.2s;
-}
 
-.blurBox {
+  .ds-card-content {
-  text-align: right;
+    position: relative;
-  position: relative;
+    padding-top: 24px;
-  top: -70px;
+  }
-  float: right;
-}
-.blur-img-preview {
-  width: 100px;
-}
 
-.bluricon-post {
+  .blur-toggle {
-  font-size: xx-large;
+    position: absolute;
-  background-color: green;
+    top: -80px;
-}
+    right: 0;
+
+    display: flex;
+    align-items: center;
+
+    height: 80px;
+    padding: 12px;
+
+    .preview {
+      height: 100%;
+      margin-right: 12px;
+    }
+  }
 
-.page-name-post-id-slug {
   .content-menu {
     float: right;
     margin-right: -$space-x-small;
     margin-top: -$space-large;
   }
 
-  .post-card {
+  .comments {
-    margin: auto;
+    margin-top: $space-small;
-    cursor: auto;
 
-    .comments {
+    .comment {
       margin-top: $space-small;
-
+      position: relative;
-      .comment {
-        margin-top: $space-small;
-        position: relative;
-      }
-
-      .ProseMirror {
-        min-height: 0px;
-      }
     }
 
-    .ds-card-image {
+    .ProseMirror {
-      img {
+      min-height: 0px;
-        max-height: 2000px;
-        object-fit: contain;
-        object-position: center;
-      }
     }
+  }
 
-    .ds-card-footer {
+  .ds-card-image {
-      padding: 0;
+    img {
+      max-height: 2000px;
+      object-fit: contain;
+      object-position: center;
+    }
+  }
 
-      .ds-section {
+  .ds-card-footer {
-        padding: $space-base;
+    padding: 0;
-      }
+
+    .ds-section {
+      padding: $space-base;
     }
   }
 }
+
 @media only screen and (max-width: 960px) {
   .shout-button {
     float: left;