Tweak UI
This commit is contained in:
parent
faf2c007aa
commit
c0c64a2d5d
|
@ -253,6 +253,7 @@
|
||||||
"vue-prism-editor": "2.0.0-alpha.2",
|
"vue-prism-editor": "2.0.0-alpha.2",
|
||||||
"vue-router": "4.0.5",
|
"vue-router": "4.0.5",
|
||||||
"vue-style-loader": "4.1.3",
|
"vue-style-loader": "4.1.3",
|
||||||
|
"vue-svg-loader": "0.17.0-beta.2",
|
||||||
"vuedraggable": "4.0.1",
|
"vuedraggable": "4.0.1",
|
||||||
"web-push": "3.4.4",
|
"web-push": "3.4.4",
|
||||||
"webpack": "5.27.2",
|
"webpack": "5.27.2",
|
||||||
|
|
|
@ -24,7 +24,7 @@ export default defineComponent({
|
||||||
--formXPadding: 32px;
|
--formXPadding: 32px;
|
||||||
--formYPadding: 32px;
|
--formYPadding: 32px;
|
||||||
|
|
||||||
line-height: 1.4em;
|
line-height: 1.3em;
|
||||||
background: var(--bg);
|
background: var(--bg);
|
||||||
padding: var(--formYPadding) var(--formXPadding);
|
padding: var(--formYPadding) var(--formXPadding);
|
||||||
|
|
||||||
|
|
|
@ -215,7 +215,7 @@ export default defineComponent({
|
||||||
}
|
}
|
||||||
|
|
||||||
> .input {
|
> .input {
|
||||||
$height: 52px;
|
$height: 48px;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
> input {
|
> input {
|
||||||
|
|
|
@ -69,8 +69,8 @@ export default defineComponent({
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
vertical-align: bottom;
|
vertical-align: bottom;
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 20px;
|
width: 16px;
|
||||||
height: 20px;
|
height: 16px;
|
||||||
margin-right: 8px;
|
margin-right: 8px;
|
||||||
background: none;
|
background: none;
|
||||||
border: 2px solid var(--inputBorder);
|
border: 2px solid var(--inputBorder);
|
||||||
|
|
|
@ -69,7 +69,7 @@ export default defineComponent({
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
> .main {
|
> .main {
|
||||||
padding: 24px 16px;
|
padding: 22px 16px;
|
||||||
|
|
||||||
> input {
|
> input {
|
||||||
display: block;
|
display: block;
|
||||||
|
|
|
@ -97,7 +97,7 @@ export default defineComponent({
|
||||||
font: inherit;
|
font: inherit;
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
font-size: 1em;
|
font-size: 1em;
|
||||||
height: 52px;
|
height: 48px;
|
||||||
background: none;
|
background: none;
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
|
|
|
@ -57,7 +57,7 @@ export default defineComponent({
|
||||||
> .main {
|
> .main {
|
||||||
position: relative;
|
position: relative;
|
||||||
display: flex;
|
display: flex;
|
||||||
padding: 16px;
|
padding: 14px 16px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
> * {
|
> * {
|
||||||
|
|
|
@ -30,6 +30,11 @@
|
||||||
<MkA class="item" active-class="active" to="/settings" :behavior="settingsWindowed ? 'modalWindow' : null">
|
<MkA class="item" active-class="active" to="/settings" :behavior="settingsWindowed ? 'modalWindow' : null">
|
||||||
<Fa :icon="faCog" fixed-width/><span class="text">{{ $ts.settings }}</span>
|
<Fa :icon="faCog" fixed-width/><span class="text">{{ $ts.settings }}</span>
|
||||||
</MkA>
|
</MkA>
|
||||||
|
<div class="divider"></div>
|
||||||
|
<div class="foo">
|
||||||
|
<MkEmoji :normal="true" :no-style="true" emoji="🍮"/>
|
||||||
|
</div>
|
||||||
|
<!--<MisskeyLogo class="misskey"/>-->
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
@ -44,10 +49,12 @@ import { sidebarDef } from '@client/sidebar';
|
||||||
import { getAccounts, addAccount, login } from '@client/account';
|
import { getAccounts, addAccount, login } from '@client/account';
|
||||||
import MkButton from '@client/components/ui/button.vue';
|
import MkButton from '@client/components/ui/button.vue';
|
||||||
import { StickySidebar } from '@client/scripts/sticky-sidebar';
|
import { StickySidebar } from '@client/scripts/sticky-sidebar';
|
||||||
|
import MisskeyLogo from '@/../assets/client/misskey.svg';
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
components: {
|
components: {
|
||||||
MkButton
|
MkButton,
|
||||||
|
MisskeyLogo,
|
||||||
},
|
},
|
||||||
|
|
||||||
data() {
|
data() {
|
||||||
|
@ -315,6 +322,16 @@ export default defineComponent({
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
> .misskey {
|
||||||
|
fill: currentColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
> .foo {
|
||||||
|
text-align: center;
|
||||||
|
padding: 8px 0 16px 0;
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
|
||||||
> .item {
|
> .item {
|
||||||
position: relative;
|
position: relative;
|
||||||
display: block;
|
display: block;
|
||||||
|
|
|
@ -103,6 +103,12 @@ module.exports = {
|
||||||
esModule: false, // TODO: trueにすると壊れる。Vue3移行の折にはtrueにできるかもしれない
|
esModule: false, // TODO: trueにすると壊れる。Vue3移行の折にはtrueにできるかもしれない
|
||||||
}
|
}
|
||||||
}, postcss]
|
}, postcss]
|
||||||
|
}, {
|
||||||
|
test: /\.svg$/,
|
||||||
|
use: [
|
||||||
|
'vue-loader',
|
||||||
|
'vue-svg-loader',
|
||||||
|
],
|
||||||
}, {
|
}, {
|
||||||
test: /\.(eot|woff|woff2|svg|ttf)([?]?.*)$/,
|
test: /\.(eot|woff|woff2|svg|ttf)([?]?.*)$/,
|
||||||
type: 'asset/resource'
|
type: 'asset/resource'
|
||||||
|
|
19
yarn.lock
19
yarn.lock
|
@ -6613,10 +6613,10 @@ methods@^1.1.2:
|
||||||
resolved "https://registry.yarnpkg.com/methods/-/methods-1.1.2.tgz#5529a4d67654134edcc5266656835b0f851afcee"
|
resolved "https://registry.yarnpkg.com/methods/-/methods-1.1.2.tgz#5529a4d67654134edcc5266656835b0f851afcee"
|
||||||
integrity sha1-VSmk1nZUE07cxSZmVoNbD4Ua/O4=
|
integrity sha1-VSmk1nZUE07cxSZmVoNbD4Ua/O4=
|
||||||
|
|
||||||
mfm-js@0.12.0:
|
mfm-js@0.14.0:
|
||||||
version "0.12.0"
|
version "0.14.0"
|
||||||
resolved "https://registry.yarnpkg.com/mfm-js/-/mfm-js-0.12.0.tgz#47be2fdb18869b9e55576fffcc159d0417c670db"
|
resolved "https://registry.yarnpkg.com/mfm-js/-/mfm-js-0.14.0.tgz#0952ed6f0dd8553866bde7e646c3d5d3d23aeae9"
|
||||||
integrity sha512-u0IyIMwzsGsOGmctRXcOdWYsh9LWHKHqX+XCBfPjORX+1DCBdonaO6pryOawns6z16Xvus2yZk0KMMqWt2TotQ==
|
integrity sha512-snCiszquj6DIOARdgJfI8b6o9PbojAmJe1thrsBkUTxG+XG27rCOmjEL1kc1705XraJo0aVCLR9vE6YmjHiUQg==
|
||||||
dependencies:
|
dependencies:
|
||||||
twemoji-parser "13.0.x"
|
twemoji-parser "13.0.x"
|
||||||
|
|
||||||
|
@ -10050,7 +10050,7 @@ svgo@^0.7.0:
|
||||||
sax "~1.2.1"
|
sax "~1.2.1"
|
||||||
whet.extend "~0.9.9"
|
whet.extend "~0.9.9"
|
||||||
|
|
||||||
svgo@^1.0.0:
|
svgo@^1.0.0, svgo@^1.3.2:
|
||||||
version "1.3.2"
|
version "1.3.2"
|
||||||
resolved "https://registry.yarnpkg.com/svgo/-/svgo-1.3.2.tgz#b6dc511c063346c9e415b81e43401145b96d4167"
|
resolved "https://registry.yarnpkg.com/svgo/-/svgo-1.3.2.tgz#b6dc511c063346c9e415b81e43401145b96d4167"
|
||||||
integrity sha512-yhy/sQYxR5BkC98CY7o31VGsg014AKLEPxdfhora76l36hD9Rdy5NZA/Ocn6yayNPgSamYdtX2rFJdcv07AYVw==
|
integrity sha512-yhy/sQYxR5BkC98CY7o31VGsg014AKLEPxdfhora76l36hD9Rdy5NZA/Ocn6yayNPgSamYdtX2rFJdcv07AYVw==
|
||||||
|
@ -10980,6 +10980,15 @@ vue-style-loader@4.1.3:
|
||||||
hash-sum "^1.0.2"
|
hash-sum "^1.0.2"
|
||||||
loader-utils "^1.0.2"
|
loader-utils "^1.0.2"
|
||||||
|
|
||||||
|
vue-svg-loader@0.17.0-beta.2:
|
||||||
|
version "0.17.0-beta.2"
|
||||||
|
resolved "https://registry.yarnpkg.com/vue-svg-loader/-/vue-svg-loader-0.17.0-beta.2.tgz#954b2a08b5488998dd81ec371ab5fb5ea4182ef7"
|
||||||
|
integrity sha512-iMUGJTKEcuNAG8VXOchjA8443IqEmEi2Aw6EVIHWma2cC4TUQ7Oet5Yry9IFfqXQXXvyzXz5EyttVvfRGTNH4Q==
|
||||||
|
dependencies:
|
||||||
|
loader-utils "^2.0.0"
|
||||||
|
semver "^7.3.2"
|
||||||
|
svgo "^1.3.2"
|
||||||
|
|
||||||
vue@3.0.8:
|
vue@3.0.8:
|
||||||
version "3.0.8"
|
version "3.0.8"
|
||||||
resolved "https://registry.yarnpkg.com/vue/-/vue-3.0.8.tgz#14fc72a9ab0291f8461c94450bf45b9df82fc45a"
|
resolved "https://registry.yarnpkg.com/vue/-/vue-3.0.8.tgz#14fc72a9ab0291f8461c94450bf45b9df82fc45a"
|
||||||
|
|
Loading…
Reference in New Issue