From e46bb942260d192beb601727519ed90df5c62494 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 28 Jan 2020 23:45:14 +0200
Subject: [PATCH] updated preview to account for underlay
---
src/App.scss | 4 +-
src/App.vue | 2 +-
src/components/style_switcher/preview.vue | 188 ++++++++++--------
.../style_switcher/style_switcher.vue | 4 +-
4 files changed, 107 insertions(+), 91 deletions(-)
diff --git a/src/App.scss b/src/App.scss
index 1fabaaa94..85fd0b47a 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -31,9 +31,11 @@ h4 {
margin: auto;
min-height: 100vh;
max-width: 980px;
+ align-content: flex-start;
+}
+.underlay {
background-color: rgba(0,0,0,0.15);
background-color: var(--underlay, rgba(0,0,0,0.15));
- align-content: flex-start;
}
.text-center {
diff --git a/src/App.vue b/src/App.vue
index 1b1c2648c..ff62fc514 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -78,7 +78,7 @@
</nav>
<div
id="content"
- class="container"
+ class="container underlay"
>
<div class="sidebar-flexer mobile-hidden">
<div class="sidebar-bounds">
diff --git a/src/components/style_switcher/preview.vue b/src/components/style_switcher/preview.vue
index 101a32bd6..5b8c3839f 100644
--- a/src/components/style_switcher/preview.vue
+++ b/src/components/style_switcher/preview.vue
@@ -1,101 +1,117 @@
<template>
- <div class="panel dummy">
- <div class="panel-heading">
- <div class="title">
- {{ $t('settings.style.preview.header') }}
- <span class="badge badge-notification">
- 99
+ <div class="preview-container">
+ <div class="underlay underlay-preview"/>
+ <div class="panel dummy">
+ <div class="panel-heading">
+ <div class="title">
+ {{ $t('settings.style.preview.header') }}
+ <span class="badge badge-notification">
+ 99
+ </span>
+ </div>
+ <span class="faint">
+ {{ $t('settings.style.preview.header_faint') }}
+ </span>
+ <span class="alert error">
+ {{ $t('settings.style.preview.error') }}
</span>
+ <button class="btn">
+ {{ $t('settings.style.preview.button') }}
+ </button>
</div>
- <span class="faint">
- {{ $t('settings.style.preview.header_faint') }}
- </span>
- <span class="alert error">
- {{ $t('settings.style.preview.error') }}
- </span>
- <button class="btn">
- {{ $t('settings.style.preview.button') }}
- </button>
- </div>
- <div class="panel-body theme-preview-content">
- <div class="post">
- <div class="avatar">
- ( 汀掳 蜏蕱 汀掳)
- </div>
- <div class="content">
- <h4>
- {{ $t('settings.style.preview.content') }}
- </h4>
+ <div class="panel-body theme-preview-content">
+ <div class="post">
+ <div class="avatar">
+ ( 汀掳 蜏蕱 汀掳)
+ </div>
+ <div class="content">
+ <h4>
+ {{ $t('settings.style.preview.content') }}
+ </h4>
- <i18n path="settings.style.preview.text">
- <code style="font-family: var(--postCodeFont)">
- {{ $t('settings.style.preview.mono') }}
- </code>
- <a style="color: var(--link)">
- {{ $t('settings.style.preview.link') }}
- </a>
- </i18n>
+ <i18n path="settings.style.preview.text">
+ <code style="font-family: var(--postCodeFont)">
+ {{ $t('settings.style.preview.mono') }}
+ </code>
+ <a style="color: var(--link)">
+ {{ $t('settings.style.preview.link') }}
+ </a>
+ </i18n>
- <div class="icons">
- <i
- style="color: var(--cBlue)"
- class="button-icon icon-reply"
- />
- <i
- style="color: var(--cGreen)"
- class="button-icon icon-retweet"
- />
- <i
- style="color: var(--cOrange)"
- class="button-icon icon-star"
- />
- <i
- style="color: var(--cRed)"
- class="button-icon icon-cancel"
- />
+ <div class="icons">
+ <i
+ style="color: var(--cBlue)"
+ class="button-icon icon-reply"
+ />
+ <i
+ style="color: var(--cGreen)"
+ class="button-icon icon-retweet"
+ />
+ <i
+ style="color: var(--cOrange)"
+ class="button-icon icon-star"
+ />
+ <i
+ style="color: var(--cRed)"
+ class="button-icon icon-cancel"
+ />
+ </div>
</div>
</div>
- </div>
- <div class="after-post">
- <div class="avatar-alt">
- :^)
- </div>
- <div class="content">
- <i18n
- path="settings.style.preview.fine_print"
- tag="span"
- class="faint"
- >
- <a style="color: var(--faintLink)">
- {{ $t('settings.style.preview.faint_link') }}
- </a>
- </i18n>
+ <div class="after-post">
+ <div class="avatar-alt">
+ :^)
+ </div>
+ <div class="content">
+ <i18n
+ path="settings.style.preview.fine_print"
+ tag="span"
+ class="faint"
+ >
+ <a style="color: var(--faintLink)">
+ {{ $t('settings.style.preview.faint_link') }}
+ </a>
+ </i18n>
+ </div>
</div>
- </div>
- <div class="separator" />
+ <div class="separator" />
- <span class="alert error">
- {{ $t('settings.style.preview.error') }}
- </span>
- <input
- :value="$t('settings.style.preview.input')"
- type="text"
- >
-
- <div class="actions">
- <span class="checkbox">
- <input
- id="preview_checkbox"
- checked="very yes"
- type="checkbox"
- >
- <label for="preview_checkbox">{{ $t('settings.style.preview.checkbox') }}</label>
+ <span class="alert error">
+ {{ $t('settings.style.preview.error') }}
</span>
- <button class="btn">
- {{ $t('settings.style.preview.button') }}
- </button>
+ <input
+ :value="$t('settings.style.preview.input')"
+ type="text"
+ >
+
+ <div class="actions">
+ <span class="checkbox">
+ <input
+ id="preview_checkbox"
+ checked="very yes"
+ type="checkbox"
+ >
+ <label for="preview_checkbox">{{ $t('settings.style.preview.checkbox') }}</label>
+ </span>
+ <button class="btn">
+ {{ $t('settings.style.preview.button') }}
+ </button>
+ </div>
</div>
</div>
</div>
</template>
+
+<style lang="scss">
+.preview-container {
+ position: relative;
+}
+.underlay-preview {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 10px;
+ right: 10px;
+}
+</style>
diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue
index 5a42bba76..a3f9b4885 100644
--- a/src/components/style_switcher/style_switcher.vue
+++ b/src/components/style_switcher/style_switcher.vue
@@ -116,9 +116,7 @@
</div>
</div>
- <div class="preview-container">
- <preview :style="previewRules" />
- </div>
+ <preview :style="previewRules" />
<keep-alive>
<tab-switcher key="style-tweak">
--
GitLab