update people page

dmslab-konkuk · Mar 11, 2024 · c10272e · c10272e
1 parent 4bd1010
commit c10272e
Show file tree

Hide file tree

Showing 10 changed files with 340 additions and 73 deletions.
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -157,7 +157,7 @@
  </div>
  <div class="menu-item hover">
  <a href="https://dmslab-konkuk.github.io/website/people"
- >People</a
+ >Researchers</a
  >
  </div>
  <div class="menu-item hover">

diff --git a/src/routes/people/+page.svelte b/src/routes/people/+page.svelte
@@ -1 +1,112 @@
-<h1>People</h1>
+<script>
+ export let data;
+</script>
+
+<div class="content-center">
+ <div class="spacer" style="height: 50px;"></div>
+ <div class="t1">DMS Researchers</div>
+ <div class="spacer" style="height: 50px;"></div>
+
+ {#each typeof data.people === "undefined" ? [] : data.people.researchers as people_data}
+ <div class="t2">{people_data.team}</div>
+ <div class="spacer" style="height: 10px;"></div>
+ {#if typeof people_data.description !== "undefined"}
+ <div class="t3" style="font-weight: normal;">
+ {people_data.description}
+ </div>
+ {/if}
+ <div class="spacer" style="height: 20px;"></div>
+ <!-- PhD and MS -->
+ <div class="profile-container">
+ {#each typeof people_data.teammate === "undefined" ? [] : people_data.teammate as team_data}
+ {#if team_data.role.includes("ms") || team_data.role.includes("ms_intern") || team_data.role.includes("phd") || team_data.role.includes("phd_course")}
+ <div class="profile-card">
+ {#if team_data.profile === "none"}
+ <div class="profile-alt"></div>
+ {:else}
+ <img
+ class="profile-img"
+ src={team_data.profile}
+ alt=""
+ />
+ {/if}
+ {#if team_data.name_kor === "none"}
+ <p class="profile-name">{team_data.name_eng}</p>
+ {:else}
+ <p class="profile-name">
+ {team_data.name_eng} ({team_data.name_kor})
+ </p>
+ {/if}
+ <div class="profile-badge-container">
+ {#each typeof team_data.role === "undefined" ? [] : team_data.role.split(",") as role}
+ <!-- svelte-ignore a11y-missing-attribute -->
+ {#if role === "prof"}
+ <div class="prof">Prof.</div>
+ {:else if role === "phd"}
+ <div class="phd">PhD.</div>
+ {:else if role === "phd_course"}
+ <div class="phd-course">PhD. Course</div>
+ {:else if role === "ms"}
+ <div class="ms">M.S. Course</div>
+ {:else if role === "ms_intern"}
+ <div class="ms-intern">M.S. Intern</div>
+ {:else if role === "bs"}
+ <div class="bs">B.S. Course</div>
+ {:else}
+ <div class="default">{role}</div>
+ {/if}
+ {/each}
+ </div>
+ </div>
+ {/if}
+ {/each}
+ </div>
+
+ <!-- BS and ETC -->
+ <div class="profile-container">
+ {#each typeof people_data.teammate === "undefined" ? [] : people_data.teammate as team_data}
+ {#if !(team_data.role.includes("ms") || team_data.role.includes("ms_intern") || team_data.role.includes("phd") || team_data.role.includes("phd_course"))}
+ <div class="profile-card" style="margin-top: 30px;">
+ {#if team_data.profile === "none"}
+ <div class="profile-alt"></div>
+ {:else}
+ <img
+ class="profile-img"
+ src={team_data.profile}
+ alt=""
+ />
+ {/if}
+ {#if team_data.name_kor === "none"}
+ <p class="profile-name">{team_data.name_eng}</p>
+ {:else}
+ <p class="profile-name">
+ {team_data.name_eng} ({team_data.name_kor})
+ </p>
+ {/if}
+ <div class="profile-badge-container">
+ {#each typeof team_data.role === "undefined" ? [] : team_data.role.split(",") as role}
+ <!-- svelte-ignore a11y-missing-attribute -->
+ {#if role === "prof"}
+ <div class="prof">Prof.</div>
+ {:else if role === "phd"}
+ <div class="phd">PhD.</div>
+ {:else if role === "phd_course"}
+ <div class="phd-course">PhD. Course</div>
+ {:else if role === "ms"}
+ <div class="ms">M.S. Course</div>
+ {:else if role === "ms_intern"}
+ <div class="ms-intern">M.S. Intern</div>
+ {:else if role === "bs"}
+ <div class="bs">B.S. Course</div>
+ {:else}
+ <div class="default">{role}</div>
+ {/if}
+ {/each}
+ </div>
+ </div>
+ {/if}
+ {/each}
+ </div>
+ <div class="spacer" style="height: 100px;"></div>
+ {/each}
+</div>
diff --git a/static/css/style.css b/static/css/style.css
@@ -224,6 +224,18 @@ body {
  /* border: 1px solid red; */
 }
 
+.content-center {
+ width: 1248px;
+ max-width: 1248px;
+ padding: 0 48px 48px 48px;
+ margin-top: 75px;
+ z-index: 1;
+ display: flex;
+ align-items: center;
+ flex-direction: column;
+ /* border: 1px solid red; */
+}
+
 /* .main-gallery-viewer {
  width: 100%;
  height: 560px;
@@ -496,4 +508,89 @@ body {
 .sub-li {
  margin-left: 16px;
  list-style-type: circle;
+}
+
+.profile-alt {
+ width: 120px;
+ height: 120px;
+ background: #ededed;
+ border-radius: 60px;
+}
+
+.profile-img {
+ width: 120px;
+ height: 120px;
+ background: #ededed;
+ object-fit: cover;
+ border-radius: 60px;
+ border: 0.5px solid #d0d0d0;
+}
+
+.profile-name {
+ font-size: 15px;
+ font-weight: bold;
+ margin-top: 10px;
+ margin-bottom: 4px;
+}
+
+.profile-card {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ margin-left: 14px;
+ margin-right: 14px;
+ min-width: 120px;
+}
+
+.profile-container {
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+}
+
+.profile-badge-container {
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+}
+
+.profile-badge-container>div {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 1px 8px 1px 8px;
+ border-radius: 10px;
+ font-size: 11px;
+ background: #dfdfdf;
+ margin: 0 3px 0 3px;
+}
+
+.profile-badge-container>.prof {
+ background: linear-gradient(to right, #E599FF, #8F7CFF);
+}
+
+.profile-badge-container>.phd {
+ background: linear-gradient(to right, #ACE1FF, #4FACE0);
+}
+
+.profile-badge-container>.phd-course {
+ background: linear-gradient(to right, #FFACE8, #FF7272);
+}
+
+.profile-badge-container>.ms {
+ background: linear-gradient(to right, #FF9C72, #FF9C72);
+}
+
+.profile-badge-container>.ms-intern {
+ background: linear-gradient(to right, #FF9C72, #FF9C72);
+}
+
+.profile-badge-container>.bs {
+ background: linear-gradient(to right, #98F6E5, #6DE9A6);
+}
+
+.profile-badge-container>.default {
+ background: linear-gradient(to right, #dddddd, #bdbdbd);
 }