Tweak UI
This commit is contained in:
		
							parent
							
								
									503f23ad3b
								
							
						
					
					
						commit
						f32cad2667
					
				
					 4 changed files with 23 additions and 22 deletions
				
			
		|  | @ -1,5 +1,5 @@ | |||
| <template> | ||||
| <div class="vrtktovg _formItem" v-size="{ max: [500] }"> | ||||
| <div class="vrtktovg _formItem" v-size="{ max: [500] }" v-sticky-container> | ||||
| 	<div class="_formLabel"><slot name="label"></slot></div> | ||||
| 	<div class="main _form_group"> | ||||
| 		<slot></slot> | ||||
|  | @ -21,14 +21,6 @@ export default defineComponent({ | |||
| 		> ::v-deep(*) { | ||||
| 			margin: 0; | ||||
| 
 | ||||
| 			&:not(:first-child) { | ||||
| 				&._formPanel, ._formPanel { | ||||
| 					border-top: none; | ||||
| 					border-top-left-radius: 0; | ||||
| 					border-top-right-radius: 0; | ||||
| 				} | ||||
| 			} | ||||
| 
 | ||||
| 			&:not(:last-child) { | ||||
| 				&._formPanel, ._formPanel { | ||||
| 					border-bottom: solid 0.5px var(--divider); | ||||
|  | @ -36,6 +28,14 @@ export default defineComponent({ | |||
| 					border-bottom-right-radius: 0; | ||||
| 				} | ||||
| 			} | ||||
| 			 | ||||
| 			&:not(:first-child) { | ||||
| 				&._formPanel, ._formPanel { | ||||
| 					border-top: none; | ||||
| 					border-top-left-radius: 0; | ||||
| 					border-top-right-radius: 0; | ||||
| 				} | ||||
| 			} | ||||
| 		} | ||||
| 	} | ||||
| } | ||||
|  |  | |||
|  | @ -22,9 +22,16 @@ export default defineComponent({ | |||
| 	align-items: center; | ||||
| 	padding: 14px 16px; | ||||
| 
 | ||||
| 	> .key { | ||||
| 		margin-right: 8px; | ||||
| 	} | ||||
| 
 | ||||
| 	> .value { | ||||
| 		margin-left: auto; | ||||
| 		opacity: 0.7; | ||||
| 		text-overflow: ellipsis; | ||||
| 		white-space: nowrap; | ||||
| 		overflow: hidden; | ||||
| 	} | ||||
| } | ||||
| </style> | ||||
|  |  | |||
|  | @ -310,6 +310,7 @@ export default defineComponent({ | |||
| 
 | ||||
| 		> .widgets { | ||||
| 			//--panelShadow: none; | ||||
| 			width: 300px; | ||||
| 
 | ||||
| 			@media (max-width: $widgets-hide-threshold) { | ||||
| 				display: none; | ||||
|  |  | |||
|  | @ -2,8 +2,8 @@ | |||
| <div class="efzpzdvf"> | ||||
| 	<XWidgets :edit="editMode" :widgets="$store.reactiveState.widgets.value" @add-widget="addWidget" @remove-widget="removeWidget" @update-widget="updateWidget" @update-widgets="updateWidgets" @exit="editMode = false"/> | ||||
| 
 | ||||
| 	<button v-if="editMode" @click="editMode = false" class="_textButton" style="font-size: 0.9em;"><Fa :icon="faCheck"/> {{ $ts.editWidgetsExit }}</button> | ||||
| 	<button v-else @click="editMode = true" class="_textButton" style="font-size: 0.9em;"><Fa :icon="faPencilAlt"/> {{ $ts.editWidgets }}</button> | ||||
| 	<button v-if="editMode" @click="editMode = false" class="_textButton edit" style="font-size: 0.9em;"><Fa :icon="faCheck"/> {{ $ts.editWidgetsExit }}</button> | ||||
| 	<button v-else @click="editMode = true" class="_textButton edit" style="font-size: 0.9em;"><Fa :icon="faPencilAlt"/> {{ $ts.editWidgets }}</button> | ||||
| </div> | ||||
| </template> | ||||
| 
 | ||||
|  | @ -62,18 +62,11 @@ export default defineComponent({ | |||
| 	position: sticky; | ||||
| 	height: min-content; | ||||
| 	box-sizing: border-box; | ||||
| 	padding-bottom: 8px; | ||||
| 
 | ||||
| 	> * { | ||||
| 		margin: var(--margin) 0; | ||||
| 		width: 300px; | ||||
| 
 | ||||
| 		&:first-child { | ||||
| 			margin-top: 0; | ||||
| 		} | ||||
| 	} | ||||
| 
 | ||||
| 	> .add { | ||||
| 		margin: 0 auto; | ||||
| 	> .edit { | ||||
| 		display: block; | ||||
| 		margin: 16px auto; | ||||
| 	} | ||||
| } | ||||
| </style> | ||||
|  |  | |||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue