プロフィール編集ページを追加

GenbuHase · GenbuHase · commit 977125046d22 · 2018-05-03T09:40:48.000+09:00
diff --git a/libraries/common/common.css b/libraries/common/common.css
@@ -22,10 +22,6 @@
 	Line-Height: 1.75;
 }
 
-HTML, Body {
-	Height: 100%;
-}
-
 Body {
 	Margin: 0;
 	Background: URL("/SimpleThread/images/Back.jpg");
@@ -41,6 +37,28 @@ A:Not([Href]) {
 
 
 
+Div[Data-Component="Frame-Content"] {
+	Display: Flex;
+	Flex-Direction: Column;
+}
+
+Main {
+	Position: Relative;
+	Top: 1rem;
+
+	Flex: 1;
+	
+	Margin: 0 17.5%;
+	Padding: 4vmin;
+	Background-Color: White;
+}
+
+@media (Max-Width: 480px) {
+	Main {
+		Margin: 0.5rem;
+	}
+}
+
 .mdc-typography--headline {
 	Border-Bottom: Thin Solid LightSeagreen;
 }
@@ -57,43 +75,31 @@ A:Not([Href]) {
 	Vertical-Align: Bottom;
 }
 
-.profilePhoto.disabled {
-	Display: None;
-}
-
-.profilePhoto.mdc-tab {
-	Min-Width: Auto;
-}
-
 .profilePhoto::Before {
 	Content: "";
 
 	Display: Block;
-	Width: 2.5em;
-	Height: 2.5em;
+	Padding-Top: 100%;
 
 	Background: var(--photoUrl, RGBA(0, 0, 0, 0.2)) Center / Cover;
 	Border-Radius: 100%;
 }
 
-Div[Data-Component="Frame-Content"] {
-	Display: Flex;
-	Flex-Direction: Column;
+A.profilePhoto.mdc-tab::Before {
+	Width: 2.5em;
+	Height: 2.5em;
+
+	Padding-Top: 0;
 }
 
-Main {
-	Position: Relative;
-	Top: 1rem;
+A.profilePhoto.mdc-tab {
+	Min-Width: Auto;
+}
 
-	Flex: 1;
-	
-	Margin: 0 17.5%;
-	Padding: 4vmin;
-	Background-Color: White;
+.profilePhoto.disabled {
+	Display: None;
 }
 
-@media (Max-Width: 480px) {
-	Main {
-		Margin: 0.5rem;
-	}
+.mdc-text-field > Textarea {
+	Resize: None;
 }
diff --git a/profile/index.html b/profile/index.html
@@ -19,6 +19,24 @@
 	
 	<Body>
 		<Main ID = "Profile">
+			<Div ID = "Profile-Photo" Class = "profilePhoto"></Div>
+
+			<Div ID = "Profile-Info">
+				<Div Class = "mdc-text-field">
+					<Input ID = "Profile-Info-Name" Type = "Text" Class = "mdc-text-field__input">
+					<Label Class = "mdc-text-field__label" For = "Profile-Info-Name" Data-Locales = "profile.name">ユーザー名...</Label>
+					<Div Class = "mdc-text-field__bottom-line"></Div>
+				</Div>
+
+				<Div Class = "mdc-text-field mdc-text-field--textarea">
+					<Textarea ID = "Profile-Info-Detail" Class = "mdc-text-field__input" Rows = "8"></Textarea>
+					<Label Class = "mdc-text-field__label" For = "Profile-Info-Detail" Data-Locales = "profile.detail">自己紹介...</Label>
+				</Div>
+
+				<Div>
+					
+				</Div>
+			</Div>
 		</Main>
 	</Body>
 </HTML>
diff --git a/profile/profile.css b/profile/profile.css
@@ -0,0 +1,17 @@
+#Profile {
+	Display: Flex;
+	Flex-Direction: Row;
+	Align-Items: Flex-Start;
+}
+
+#Profile-Photo {
+	Width: 20%;
+	Margin-Right: 5%;
+}
+
+#Profile-Info {
+	Display: Flex;
+	Flex-Direction: Column;
+
+	Flex: 1;
+}
diff --git a/profile/profile.js b/profile/profile.js
@@ -0,0 +1,15 @@
+terminal.addEventListener("message", event => {
+	if (event.data.code == "Loaded") {
+		base.Database.get(base.Database.INTERVAL, `users/${base.user.uid}`, res => {
+			new DOM("#Profile-Info-Name").value = res.userName,
+			new DOM("#Profile-Info-Name").parentNode.querySelector("Label").classList.add("mdc-text-field__label--float-above");
+
+			new DOM("#Profile-Info-Detail").value = res.detail,
+			new DOM("#Profile-Info-Detail").parentNode.querySelector("Label").classList.add("mdc-text-field__label--float-above");
+		});
+	}
+});
+
+window.addEventListener("DOMContentLoaded", () => {
+	new DOM("@.mdc-text-field").forEach(textField => new mdc.textField.MDCTextField(textField));
+});
