Update

Author: hiifong

templates/user/star_list.tmpl

@@ -1,4 +1,4 @@
-{{if .IsStarList }}
+{{if false }}
 <div class="star-list">
 	<!-- Header -->
 	<div class="top">
@@ -28,14 +28,36 @@
 			</div>
 			<!-- Create List-->
 			<div>
-				<a class="ui small primary button">Create list</a>
+				<details>
+					<summary class="btn">Create list</summary>
+					<details-dialog class="box">
+						<div class="box-header">
+							<div class="box-title">
+								<h1>Create list</h1>
+								<button>Close</button>
+							</div>
+						</div>
+						<form action="#" method="post">
+							<input type="text" value="test" placeholder="⭐️ Name this list">
+							<input type="text" value="test" placeholder="Write a description">
+							<div class="btn-group">
+								<div>
+									<button>Delete list</button>
+								</div>
+								<div>
+									<button>Save list</button>
+								</div>
+							</div>
+						</form>
+					</details-dialog>
+				</details>
 			</div>
 		</div>
 	</div>
 
 	<!-- List -->
 	<div id="profile-lists-container">
-		<div class="box">
+		<div class="list-box">
 			<a href="https://ilo.nz" class="box-row">
 				<h3 class="name">Vim</h3>
 				<div class="repositories">

web_src/css/user.css

@@ -113,7 +113,55 @@
   justify-content: space-between;
 }
 
-#profile-lists-container .box {
+.star-list details>summary {
+  transition: 80ms cubic-bezier(0.33, 1, 0.68, 1);
+  transition-property: color, background-color, box-shadow, border-color;
+}
+
+.star-list .box {
+  width: 448px;
+  border-color: #d1d9e0;
+  border-radius: 0.375rem;
+  border-style: solid;
+  border-width: 0.0625rem;
+}
+
+.star-list details-dialog {
+  position: fixed;
+  margin: 10vh auto;
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 999;
+  max-height: 80vh;
+  max-width: 90vw;
+  overflow: auto;
+  border-shadow: 3px 3px 3px 3px 5px black;
+}
+
+.star-list .box-header {
+  background-color: #f6f8fa;
+  height: 37.75px;
+}
+
+.star-list h1 {
+  margin-left: 10px;
+  font-size: 0.875rem;
+  font-weight: 600;
+  height: 37.75px;
+  line-height: 37.75px;
+}
+
+.star-list .box-title {
+  height: 37.75px;
+  line-height: 37.75px;
+  font-size: 0.875rem;
+  font-weight: 600;
+  display: flex;
+  justify-content: space-between;
+}
+
+#profile-lists-container .list-box {
   margin-top: 10px;
   background-color: var(--color-body);
   border-color: #d1d9e0;