diff options
| author | Henry Jameson <me@hjkos.com> | 2018-11-27 04:54:59 +0300 |
|---|---|---|
| committer | Henry Jameson <me@hjkos.com> | 2018-11-27 05:01:18 +0300 |
| commit | b45fc6c6523b1332c6422a5dc6eff95c11a32690 (patch) | |
| tree | 4e0cc7b1c2dfb81905896d24f1f954ca302c8a34 /src/components/style_switcher/style_switcher.vue | |
| parent | f8e17cbdc58651b17a4f5639d3719a7e533b0d8b (diff) | |
updated preview window
Diffstat (limited to 'src/components/style_switcher/style_switcher.vue')
| -rw-r--r-- | src/components/style_switcher/style_switcher.vue | 98 |
1 files changed, 55 insertions, 43 deletions
diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue index 655e0589..fa173b98 100644 --- a/src/components/style_switcher/style_switcher.vue +++ b/src/components/style_switcher/style_switcher.vue @@ -60,9 +60,14 @@ <div class="preview-container"> <div class="panel dummy" :style="previewRules"> <div class="panel-heading"> - {{$t('settings.style.preview.header')}} - <span class="badge badge-notification"> - 99 + <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')}} @@ -70,56 +75,63 @@ <button class="btn"> {{$t('settings.style.preview.button')}} </button> - <span class="flex-spacer"/> - <span class="faint"> - {{$t('settings.style.preview.header_faint')}} - </span> </div> <div class="panel-body theme-preview-content"> - <div class="avatar"> - ( ͡° ͜ʖ ͡°) - </div> - <h4>Content</h4> - - <br> + <div class="post"> + <div class="avatar"> + ( ͡° ͜ʖ ͡°) + </div> + <div class="content"> + <h4> + Content + </h4> - <i18n path="settings.style.preview.text"> - <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> - <i style="color: var(--cBlue)" class="icon-reply"/> - <i style="color: var(--cGreen)" class="icon-retweet"/> - <i style="color: var(--cRed)" class="icon-cancel"/> - <i style="color: var(--cOrange)" class="icon-star"/> + <div class="icons"> + <i style="color: var(--cBlue)" class="icon-reply"/> + <i style="color: var(--cGreen)" class="icon-retweet"/> + <i style="color: var(--cOrange)" class="icon-star"/> + <i style="color: var(--cRed)" class="icon-cancel"/> + </div> + </div> + </div> - <br> - <br> + <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 class="separator"></div> - <input :value="$t('settings.style.preview.input')" type="text"> <span class="alert error"> {{$t('settings.style.preview.error')}} </span> + <input :value="$t('settings.style.preview.input')" type="text"> - <br> - <br> - - <span class="checkbox"> - <input checked="very yes" type="checkbox" id="preview_checkbox"> - <label for="preview_checkbox">{{$t('settings.style.preview.checkbox')}}</label> - </span> - <button class="btn"> - {{$t('settings.style.preview.button')}} - </button> - - <div class="separator"></div> - - <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="actions"> + <span class="checkbox"> + <input checked="very yes" type="checkbox" id="preview_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> |