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"
           />
-
-          <div>
-            <a href="https://faq.human-connection.org/" target="_blank">
-              <small>
+          <a href="https://faq.human-connection.org/" target="_blank" class="link">
             {{ $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,27 +307,24 @@ 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);
+.contribution-form {
+  .ds-card-image.--blur-image img {
     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 {
+  .blur-toggle {
+    text-align: right;
+
+    > .link {
+      display: block;
+    }
+  }
+
+  .ds-chip {
+    cursor: default;
+  }
+
+  .post-title {
     margin-top: $space-x-small;
     margin-bottom: $space-xx-small;
 
@@ -343,11 +335,6 @@ export default {
       padding-left: 0;
       padding-right: 0;
     }
-}
-
-.contribution-form {
-  .ds-chip {
-    cursor: default;
   }
 }
 </style>

webapp/components/PostCard/PostCard.vue

@@ -5,8 +5,8 @@
     :class="{
       'post-card': true,
       'disabled-content': post.disabled,
-      'post--pinned': isPinned,
-      'images-set-blur': post.blurImage,
+      '--pinned': isPinned,
+      '--blur-image': post.blurImage,
     }"
   >
     <!-- Post Link Target -->
@@ -157,22 +157,26 @@ export default {
   },
 }
 </script>
-<style scoped lang="scss">
-.ds-card-image img {
+<style lang="scss">
+.post-card {
+  justify-content: space-between;
+  position: relative;
+  z-index: 1;
+  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;
-  -o-object-fit: cover;
-  object-fit: cover;
-  -o-object-position: center;
-  object-position: center;
-}
-
-.post-card {
-  cursor: pointer;
-  position: relative;
-  z-index: 1;
-  justify-content: space-between;
+  }
 
   > .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">
-        <img
-          v-show="blurred"
-          :src="post.image | proxyApiUrl"
-          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" />
+      <aside v-show="post.blurImage" class="blur-toggle">
+        <img v-show="blurred" :src="post.image | proxyApiUrl" class="preview" />
+        <ds-button :icon="blurred ? 'eye' : 'eye-slash'" primary @click="blurred = !blurred" />
+      </aside>
       <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,45 +216,39 @@ export default {
 }
 </script>
 <style lang="scss">
-.images-set-blur .ds-card-image {
-  -webkit-filter: blur(22px);
-  -moz-filter: blur(22px);
-  -ms-filter: blur(22px);
-  -o-filter: blur(22px);
+.post-page {
+  &.--blur-image > .ds-card-image img {
     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 {
-  text-align: right;
+  .ds-card-content {
     position: relative;
-  top: -70px;
-  float: right;
-}
-.blur-img-preview {
-  width: 100px;
-}
+    padding-top: 24px;
+  }
 
-.bluricon-post {
-  font-size: xx-large;
-  background-color: green;
-}
+  .blur-toggle {
+    position: absolute;
+    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 {
-    margin: auto;
-    cursor: auto;
-
   .comments {
     margin-top: $space-small;
 
@@ -302,8 +277,8 @@ export default {
       padding: $space-base;
     }
   }
-  }
 }
+
 @media only screen and (max-width: 960px) {
   .shout-button {
     float: left;