fix alignment

go-gitea · Jun 13, 2023 · ad8ff73 · ad8ff73
1 parent a51b115
commit ad8ff73
Show file tree

Hide file tree

Showing 2 changed files with 128 additions and 33 deletions.
diff --git a/templates/devtest/gitea-ui.tmpl b/templates/devtest/gitea-ui.tmpl
@@ -117,6 +117,80 @@
 		<div>1y future: {{TimeSince .TimeFuture1y $.locale}}</div>
 	</div>
 
+	<div>
+		<h1>SVG alignment</h1>
+		<div class="flex-text-block">{{svg "octicon-alert"}} {{svg "octicon-x"}} text (block)</div>
+		<div><div class="flex-text-inline">{{svg "octicon-alert"}} {{svg "octicon-x"}} text</div> (inline)</div>
+		<div><button class="ui red button">{{svg "octicon-alert" 24}} {{svg "octicon-x" 24}} text</button></div>
+		<div>
+			<div class="ui dropdown" style="border: 1px red dashed" data-tooltip-content="border for demo purpose only">
+				<span class="text">simple</span>
+				{{svg "octicon-triangle-down" 14 "dropdown icon"}}
+				<div class="menu">
+					<div class="item">item</div>
+				</div>
+			</div>
+			<div class="ui button dropdown">
+				<span class="text">button dropdown</span>
+				{{svg "octicon-triangle-down" 14 "dropdown icon"}}
+				<div class="menu">
+					<div class="item">item</div>
+				</div>
+			</div>
+			<div class="ui search selection dropdown">
+				<span class="text">search ...</span>
+				<input name="value" class="search">
+				{{svg "octicon-triangle-down" 14 "dropdown icon"}}
+				{{svg "octicon-x" 14 "remove icon"}}
+				<div class="menu">
+					<div class="item">item</div>
+				</div>
+			</div>
+			<div class="ui multiple selection dropdown">
+				<input class="hidden" value="1">
+				{{svg "octicon-triangle-down" 14 "dropdown icon"}}
+				{{svg "octicon-x" 14 "remove icon"}}
+				<div class="default text">empty multiple dropdown</div>
+				<div class="menu">
+					<div class="item">item</div>
+				</div>
+			</div>
+			<div class="ui multiple clearable search selection dropdown">
+				<input type="hidden" value="1">
+				{{svg "octicon-triangle-down" 14 "dropdown icon"}}
+				{{svg "octicon-x" 14 "remove icon"}}
+				<div class="default text">clearable search dropdown</div>
+				<div class="menu">
+					<div class="item" data-value="1">item</div>
+				</div>
+			</div>
+			<div class="ui buttons">
+				<button class="ui button">Button with Dropdown</button>
+				<div class="ui floating dropdown icon button">
+					{{svg "octicon-triangle-down" 14 "dropdown icon"}}
+					<div class="menu">
+						<div class="item">item</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+	<div>
+		<div class="ui dropdown mini button">
+			<span class="text">small dropdown</span>
+			{{svg "octicon-triangle-down" 12 "dropdown icon"}}
+			<div class="menu">
+				<div class="item">item</div>
+			</div>
+		</div>
+		<div class="ui dropdown large button">
+			<span class="text">large dropdown</span>
+			{{svg "octicon-triangle-down" 18 "dropdown icon"}}
+			<div class="menu">
+				<div class="item">item</div>
+			</div>
+		</div>
+	</div>
 	<div>
 		<h1>ComboMarkdownEditor</h1>
 		<div>ps: no JS code attached, so just a layout</div>

diff --git a/web_src/css/base.css b/web_src/css/base.css
@@ -1042,10 +1042,6 @@ img.ui.avatar,
   background: var(--color-active);
 }
 
-.ui.form .field > .selection.dropdown > .dropdown.icon {
-  height: auto;
-}
-
 .ui.loading.segment::before,
 .ui.loading.form::before {
   background: none;
@@ -2135,35 +2131,6 @@ table th[data-sortt-desc] .svg {
   margin-left: 0.25rem;
 }
 
-.ui.dropdown .svg.dropdown.icon,
-.ui.dropdown .svg.remove.icon,
-.svg.dropdown.icon {
-  margin-top: 0 !important; /* reset the "ui.selection.dropdown > .dropdown.icon {margin-top}", for the Issue Dependencies dropdown */
-  margin-right: -0.5rem !important; /* fix up SVG dropdown triangles because Fomantic thinks they are icon fonts */
-  height: auto; /* reset the ".ui.dropdown > .dropdown.icon {height}", otherwise the icon would be too small */
-}
-
-.ui.selection.dropdown > .svg.search.icon,
-.ui.selection.dropdown > .svg.delete.icon,
-.ui.selection.dropdown > .svg.dropdown.icon {
-  top: 0 !important; /* reset the ".ui.selection.dropdown > .xxx.icon {top}" if the icon is svg instead of the fomantic icon */
-}
-
-.ui.selection.dropdown > .svg.remove.icon {
-  top: .5px;
-  right: 32px;
-  width: auto;
-}
-
-.ui.selection.dropdown > .svg.remove.icon:hover {
-  opacity: 1;
-}
-
-.ui.dropdown.no-text > .dropdown.icon {
-  margin-left: 0 !important;
-  margin-right: 0 !important;
-}
-
 .ui.dropdown .menu .item {
   border-radius: 0;
 }
@@ -2315,3 +2282,57 @@ table th[data-sortt-desc] .svg {
   width: 15px;
   height: 15px;
 }
+
+.ui.dropdown {
+  /* the dropdown doesn't have default line-height, use this to make the dropdown icon align with plain dropdown */
+  line-height: 1em;
+}
+
+.ui.ui.dropdown > .icon.icon {
+  /* plain dropdown and button dropdown use flex layout for icons */
+  position: initial;
+  padding: 0;
+  margin: 0;
+  height: auto;
+}
+
+.ui.ui.dropdown > .icon.icon:hover {
+  opacity: 1;
+}
+
+.ui.ui.button.dropdown > .icon.icon,
+.ui.ui.selection.dropdown > .icon.icon {
+  /* selection dropdown uses absolute layout for icons */
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.ui.ui.dropdown > .dropdown.icon {
+  right: 0.5em;
+}
+
+.ui.ui.dropdown > .remove.icon {
+  right: 2em; /* clear the dropdown, only used in selection dropdown, it's beside the "dropdown icon arrow" */
+}
+
+.ui.ui.buttons .floating.dropdown.icon.button {
+  padding-right: 1em;
+}
+
+.ui.ui.button,
+.ui.ui.dropdown,
+.flex-text-inline {
+  display: inline-flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: .25rem;
+  vertical-align: middle;
+}
+
+.flex-text-block {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: .25rem;
+}