style: Fix UI

Stefouch · Jan 8, 2023 · a1b85e5 · a1b85e5
1 parent ee81a02
commit a1b85e5
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 18 deletions.
diff --git a/src/module/app.js b/src/module/app.js
@@ -338,7 +338,7 @@ export default class CardChooser extends Application {
       label: game.i18n.localize('SIMOC.Start'),
       options: {
         classes: [MODULE_ID, game.system.id, 'dialog', 'participants-config'],
-        width: 500,
+        width: 600,
       },
     });
 

diff --git a/src/simultaneous-cards.scss b/src/simultaneous-cards.scss
@@ -23,6 +23,11 @@ $card-height: $card-width * 1.5;
 
   .participant-name {
     text-align: center;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    width: 100%;
+    min-width: 1px;
   }
 
   .participant-avatar {
@@ -134,12 +139,21 @@ $card-height: $card-width * 1.5;
 .simultaneous-cards.participants-config {
   .participants {
     display: grid;
-    grid-template-columns: auto auto auto;
+    grid-template-columns: auto 20% 30%;
     align-items: center;
     gap: 4px;
     margin-bottom: 12px;
   }
 
+  .row-wrapper {
+    display: contents;
+
+    &:hover > * {
+      color: var(--color-text-hyperlink);
+      background-color: var(--color-text-dark-6);
+    }
+  }
+
   .participant-info {
     display: flex;
     flex-direction: row;
@@ -148,10 +162,10 @@ $card-height: $card-width * 1.5;
     gap: 4px;
     border-radius: 4px;
 
-    &:hover {
-      color: var(--color-text-hyperlink);
-      background-color: var(--color-text-dark-6);
-    }
+    // &:hover {
+    //   color: var(--color-text-hyperlink);
+    //   background-color: var(--color-text-dark-6);
+    // }
   }
 
   .avatar {

diff --git a/src/templates/app.hbs b/src/templates/app.hbs
@@ -22,7 +22,7 @@
 			</div>
 			{{#if (or isOwner ../isGM)}}
 			{{#unless (or revealed ../isUnlocked)}}
-				<button data-action="reveal">
+				<button class="dialog-button" data-action="reveal">
 					<i class="fa-solid fa-eye"></i>
 					{{localize "SIMOC.Reveal"}}
 				</button>

diff --git a/src/templates/participants-config-dialog.hbs b/src/templates/participants-config-dialog.hbs
@@ -14,17 +14,19 @@
 			<i class="fa-regular fa-circle-info" data-tooltip="{{localize "SIMOC.CardsHelpTooltip"}}" data-tooltip-direction="UP"></i>
 		</h4>
 		{{#each participants}}
-			<label class="participant-info">
-				<input type="checkbox" id="{{id}}.checked" {{checked checked}}/>
-				<img class="avatar" src="{{img}}"/>
-				<span>{{name}}</span>
-			</label>
-			<select id="{{id}}.user">
-				{{selectOptions ../users selected=user.id localize=false}}
-			</select>
-			<select id="{{id}}.stack">
-				{{selectOptions ../stacks selected=../defaultStackId localize=false}}
-			</select>
+			<div class="row-wrapper">
+				<label class="participant-info">
+					<input type="checkbox" id="{{id}}.checked" {{checked checked}}/>
+					<img class="avatar" src="{{img}}"/>
+					<span>{{name}}</span>
+				</label>
+				<select id="{{id}}.user">
+					{{selectOptions ../users selected=user.id localize=false}}
+				</select>
+				<select id="{{id}}.stack">
+					{{selectOptions ../stacks selected=../defaultStackId localize=false}}
+				</select>
+			</div>
 		{{/each}}
 	</div>
 </form>