Tweak UI
This commit is contained in:
		
							parent
							
								
									faf2c007aa
								
							
						
					
					
						commit
						c0c64a2d5d
					
				
					 10 changed files with 46 additions and 13 deletions
				
			
		|  | @ -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…
	
	Add table
		Add a link
		
	
		Reference in a new issue