prepare class names for a day in the future, when we'll move to tailwind

This commit is contained in:
Tamius Han 2024-06-08 03:23:34 +02:00
parent 1af80096c7
commit 76c4599dee
27 changed files with 45 additions and 45 deletions

View File

@ -12,7 +12,7 @@
<div
v-if="settingsInitialized && uwWindowVisible"
class="uw-window flex flex-column uw-clickable"
class="uw-window flex flex-col uw-clickable"
:class="{'fade-out': uwWindowFadeOut}"
@mouseenter="cancelUwWindowHide"
@mouseleave="hideUwWindow()"

View File

@ -10,7 +10,7 @@
further than that.
-->
<div v-if="settingsInitialized"
class="popup flex flex-column no-overflow"
class="popup flex flex-col no-overflow"
:class="{'popup-chrome': ! BrowserDetect?.firefox}"
>
<div class="flex-row flex-nogrow flex-noshrink relative header"

View File

@ -6,7 +6,7 @@
flex-direction: row;
}
.flex-col, .flex-column {
.flex-col {
flex-direction: column;
}

View File

@ -1,6 +1,6 @@
<template>
<div
class="popup-panel flex flex-column uw-clickable h-full"
class="popup-panel flex flex-col uw-clickable h-full"
>
<div class="popup-window-header">
<div class="header-title">
@ -62,7 +62,7 @@
</div>
<div class="tab-main flex flex-row">
<div class="tab-row flex flex-column grow-0 shrink-0">
<div class="tab-row flex flex-col grow-0 shrink-0">
<div
v-for="tab of tabs"
:key="tab.id"
@ -85,7 +85,7 @@
</div>
</div>
</div>
<div class="content flex flex-column">
<div class="content flex flex-col">
<!-- autodetection warning -->
<div class="warning-area">

View File

@ -1,5 +1,5 @@
<template>
<div class="flex flex-column w-full h-full gap-2">
<div class="flex flex-col w-full h-full gap-2">
<h1>About Ultrawidify</h1>
<p>
Ultrawidify version: <b>{{addonVersion}}</b><br>

View File

@ -1,5 +1,5 @@
<template>
<div class="flex flex-column tab-root">
<div class="flex flex-col tab-root">
<div class="flex flex-row flex-wrap">
<!-- AARD performance metrics -->

View File

@ -1,5 +1,5 @@
<template>
<div class="flex flex-column w-100">
<div class="flex flex-col w-100">
<!-- TAB ROW -->
<div class="flex flex-row">

View File

@ -4,7 +4,7 @@
<div style="margin-top: 1rem; margin-bottom: 1rem;">
<b>NOTE:</b> Sites not on this list use default extension settings.
</div>
<div v-for="site of sites" :key="site.key" @click="selectedSite = site.key" class="flex flex-column container pointer" style="margin-top: 4px; padding: 0.5rem 1rem;">
<div v-for="site of sites" :key="site.key" @click="selectedSite = site.key" class="flex flex-col container pointer" style="margin-top: 4px; padding: 0.5rem 1rem;">
<div class="flex flex-row">
<div class="flex-grow pointer">
<b>{{ site.key }}</b>

View File

@ -1,5 +1,5 @@
<template>
<div class="flex flex-column">
<div class="flex flex-col">
<!--
min, max and value need to be implemented in js as this slider
should use logarithmic scale

View File

@ -1,5 +1,5 @@
<template>
<div class="flex flex-column tab-root">
<div class="flex flex-col tab-root">
<!-- ADD ANY OPTION BARS HERE -->
<!-- The rest of the tab -->

View File

@ -1,5 +1,5 @@
<template>
<div class="flex flex-column">
<div class="flex flex-col">
<div class="">

View File

@ -1,5 +1,5 @@
<template>
<div class="flex flex-column" style="position: relative; width: 100%;">
<div class="flex flex-col" style="position: relative; width: 100%;">
<!-- 'Change UI' options is a tiny bit in upper right corner. -->
<div
class="options-bar flex flex-row"

View File

@ -12,7 +12,7 @@
</div>
</div>
<div class="command-details">
<div class="flex flex-column cmd-container cd-pad">
<div class="flex flex-col cmd-container cd-pad">
<div class="flex bold">
Command:
</div>
@ -22,7 +22,7 @@
</div>
<!-- SCOPES -->
<div class="flex flex-column scopes-container cd-pad">
<div class="flex flex-col scopes-container cd-pad">
<div class="flex bold">Popup tabs:</div>
<!-- global scope -->

View File

@ -1,5 +1,5 @@
<template>
<div class="flex flex-column json-level-indent">
<div class="flex flex-col json-level-indent">
<div class="flex flex-row" @click="expanded_internal = !expanded_internal">
<div v-if="value_internal.key" class="item-key">
"{{value_internal.key}}" <b>:</b>

View File

@ -1,12 +1,12 @@
<template>
<div class="flex flex-column json-level-indent">
<div class="flex flex-col json-level-indent">
<div class="flex flex-row" @click="expanded_internal = !expanded_internal">
<div class="item-key-line">
<template v-if="label">
<b>
<span class="item-key">"{{label}}"</span>
:
</b>
</b>
</template>
<span v-if="!expanded_internal"><b> {</b> ... <b>}</b>,</span>
<template v-else><b>{</b></template>
@ -88,4 +88,4 @@ export default {
</script>
<style lang="scss" scoped src="./json.scss">
</style>
</style>

View File

@ -1,17 +1,17 @@
<template>
<div class="flex flex-column">
<div class="flex flex-col">
<div v-if="!editing && !adding" class="flex flex-row">
<div class="">
<b>Query selector:</b> {{qs.string}}<br/>
<b>Additional CSS:</b> {{qs.css || 'no style rules'}}
</div>
<div class="flex flex-column flex-nogrow">
<div class="flex flex-col flex-nogrow">
<a @click="editing = true">Edit</a>
<a @click="$emit('delete')">Delete</a>
</div>
</div>
<div v-else class="flex flex-row">
<div class="flex flex-column">
<div class="flex flex-col">
<div class="flex flex-row">
<div class="flex label-secondary form-label">
Query selector:

View File

@ -1,5 +1,5 @@
<template>
<div class="flex flex-column flex-center">
<div class="flex flex-col flex-center">
<div class="flex flex-self-center">
{{label}}
</div>

View File

@ -1,5 +1,5 @@
<template>
<div class="flex flex-column h100">
<div class="flex flex-col h100">
<div class="row">
<span class="label">Ultrawidify version:</span><br/> {{addonVersion}}
</div>

View File

@ -1,5 +1,5 @@
<template>
<div class="flex flex-column" style="padding-bottom: 20px">
<div class="flex flex-col" style="padding-bottom: 20px">
<div class="flex flex-row">
<mdicon name="crop" :size="24" />&nbsp;&nbsp;
<h1>Crop video:</h1>

View File

@ -1,5 +1,5 @@
<template>
<div class="flex flex-column" style="padding-bottom: 20px; position: relative">
<div class="flex flex-col" style="padding-bottom: 20px; position: relative">
<!-- <div class="">
<div class="label">Player picker</div>
<div class="desc">
@ -58,7 +58,7 @@
</div>
<div v-if="playerManualQs">
<div v-if="!playerByNodeIndex" class="flex flex-column">
<div v-if="!playerByNodeIndex" class="flex flex-col">
<div class="">Query selectors for player:</div>
<input type="text"
v-model="playerQs"
@ -115,7 +115,7 @@
<div class="description">
This css will be inserted into webpage every time it loads.
</div>
<div class="flex flex-column">
<div class="flex flex-col">
<textarea
v-model="playerCss"
@change="updatePlayerCss"
@ -135,7 +135,7 @@
type="checkbox"
/> Detect automatically
</div>
<div class="flex flex-column">
<div class="flex flex-col">
<div class="flex label-secondary form-label">Query selectors</div>
<input type="text"
v-model="videoQs"
@ -144,7 +144,7 @@
@blur="updateVideoQuerySelector"
/>
</div>
<div class="flex flex-column">
<div class="flex flex-col">
<div class="flex label-secondary form-label">Additional style for video element</div>
<input type="text"
v-model="videoCss"
@ -160,10 +160,10 @@
Sometimes, the extension may misbehave as a result of issues and bugs present in your browser, operating system or your GPU driver.
Some of the issues can be fixed by limiting certain functionalities of this addon.
</div>
<div class="flex flex-column">
<div class="flex flex-col">
<div
v-if="BrowserDetect.anyChromium"
class="workaround flex flex-column"
class="workaround flex flex-col"
>
<div class="flex label-secondary form-label">
<input :checked="settings?.active?.mitigations?.zoomLimit?.enabled"

View File

@ -1,5 +1,5 @@
<template>
<div class="flex flex-column h100">
<div class="flex flex-col h100">
<div class="header flex-nogrow flex-noshrink">
Ultrawidify has been updated.
</div>

View File

@ -1,5 +1,5 @@
<template>
<div class="flex flex-column h100">
<div class="flex flex-col h100">
<div class="header flex-nogrow flex-noshrink">
Thank you for installing Ultrawidify.
</div>

View File

@ -23,7 +23,7 @@
:class="{'blur': anyOpenedPopups}"
>
<div class="header flex flex-column">
<div class="header flex flex-col">
<div class="flex extension-name text-sink-anchor">
<div class="text-sink title-sink-pad w100 text-center">
Ultrawidify
@ -31,7 +31,7 @@
</div>
<!-- MENU ITEMS HERE -->
<div class="flex flex-column menu">
<div class="flex flex-col menu">
<div class="menu-item"
:class="{'selected-tab': selectedTab === 'general'}"
@click="setSelectedTab('general')"
@ -71,7 +71,7 @@
</div>
</div>
<div class="flex content-area flex-column">
<div class="flex content-area flex-col">
<div class="flex content-title text-sink-anchor">
<div class="text-sink title-sink-pad">
{{selectedTabTitle}}

View File

@ -2,7 +2,7 @@
<div class="full-screen"
@click="cancel()"
>
<div class="dialog-box flex flex-column" @click="$event.stopPropagation()">
<div class="dialog-box flex flex-col" @click="$event.stopPropagation()">
<div>
{{dialogText}}
</div>

View File

@ -2,7 +2,7 @@
<div class="full-screen"
@click="cancel()"
>
<div class="dialog-box flex flex-column" @click="$event.stopPropagation()">
<div class="dialog-box flex flex-col" @click="$event.stopPropagation()">
<div class="window-title">
{{actionIndex < 0 ? 'Add new action' : 'Edit action'}}
</div>
@ -24,7 +24,7 @@
</CommandAddEdit>
</div>
<div class="flex flex-column section-pad">
<div class="flex flex-col section-pad">
<div class="flex flex-row">
<div class="flex label-secondary form-label">
<span class="w100">
@ -95,13 +95,13 @@
@click.native="cancel()"
/>
</div>
</div>
</div>
</template>
<script>
import ShortcutButton from '../../common/components/ShortcutButton.vue'
import ShortcutButton from '../../common/components/ShortcutButton.vue'
import StretchType from '../../common/enums/StretchType.enum';
import KeyboardShortcutParser from '../../common/js/KeyboardShortcutParser';
import CommandChain from './command-builder/CommandChain';

View File

@ -24,7 +24,7 @@
</Button>
</div>
<div class="flex flex-column">
<div class="flex flex-col">
<div class="action-item-category-header">
Crop actions
</div>

View File

@ -11,7 +11,7 @@
@move-right="$emit('move-left', (index + 1))"
>
</CommandBlock>
<div class="new-command h100 flex flex-column flex-center flex-cross-center"
<div class="new-command h100 flex flex-col flex-center flex-cross-center"
@click="$emit('new-command')"
>
<div><b>+</b></div>