Merge branch 'dev'

ControlNet · ControlNet · commit 458e735eab92 · 2021-10-07T22:12:51.000+11:00
diff --git a/public/index.html b/public/index.html
@@ -19,7 +19,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>Pixeval</title>
   </head>
   <body>
     <noscript>
diff --git a/src/main/js/theme.js b/src/main/js/theme.js
@@ -1,4 +1,4 @@
-import { createTheme } from "@fluentui/react";
+import {createTheme} from "@fluentui/react";
 
 export const lightTheme = createTheme({
     palette: {
@@ -52,8 +52,4 @@ export const darkTheme = createTheme({
         white: '#323130',
     }});
 
-export const isDarkMode = () => {
-    const res = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
-    console.log(res)
-    return res
-}
+export const isDarkMode = () => window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
diff --git a/src/main/resources/Contributor.css b/src/main/resources/Contributor.css
@@ -1,8 +1,16 @@
-.Contributor {
-    margin-top: 100px;
-    margin-bottom: 100px;
-}
-
 .Contributor-title {
     text-align: center;
 }
+
+
+@media(max-width: 900px) {
+
+    #Contributor-stack-div .ms-Persona-details {
+        display: none;
+    }
+
+    #Contributor-stack-div .ms-Persona {
+        margin-left: 3px;
+        margin-right: 3px;
+    }
+}
diff --git a/src/main/resources/Header.css b/src/main/resources/Header.css
@@ -4,7 +4,9 @@
 
 .Header-logo {
     text-align: center;
-    height: 350px;
+    height: auto;
+    max-height: 350px;
+    max-width: 100%;
 }
 
 .Header-header {
diff --git a/src/main/resources/index.css b/src/main/resources/index.css
@@ -3,3 +3,13 @@ body {
   padding: 0;
   font-family: 'Microsoft Yahei', Verdana, Simsun, 'Segoe UI', Tahoma, Arial, sans-serif;
 }
+
+section {
+  margin-bottom: 100px;
+}
+
+@media(max-width: 900px) {
+  section {
+    margin-bottom: 30px;
+  }
+}
diff --git a/src/main/scala/com/github/pixeval/pixevalintro/component/section/ContributorSection.scala b/src/main/scala/com/github/pixeval/pixevalintro/component/section/ContributorSection.scala
@@ -16,6 +16,7 @@ import typings.officeUiFabricReact.personaTypesMod.{ IPersonaProps, PersonaSize
 import typings.officeUiFabricReact.stackTypesMod.{ Alignment, IStackProps }
 import typings.react.anon.Children
 
+import scala.concurrent.Future
 import scala.scalajs.concurrent.JSExecutionContext.Implicits.queue
 import scala.scalajs.js
 import scala.scalajs.js.JSON
@@ -28,25 +29,48 @@ class ContributorSection extends Component {
   import ContributorSection._
 
   type Props = Unit
-  case class State(personas: Seq[IPersonaProps], hrefs: Seq[String])
-  override def initialState: State = State(Nil, Nil)
+  case class State(
+    texts: Seq[String], imageUrls: Seq[String], secondaryTexts: Seq[String], hrefs: Seq[String], isMain: Seq[Boolean]
+  ) {
+    def toPersonaProps: Seq[PersonaProps] = texts.indices.map { i =>
+      PersonaProps(imageUrls(i), texts(i), secondaryTexts(i), isMain(i))
+    }
+  }
+
+  override def initialState: State = State(Nil, Nil, Nil, Nil, Nil)
   val css: ContributorCSS.type = ContributorCSS
 
   override def componentWillMount(): Unit = {
     Ajax.get("https://api.github.com/repos/Pixeval/Pixeval/contributors").onComplete {
       case Success(value) => {
-        val contributors = JSON.parse(value.responseText).asInstanceOf[js.Array[GithubUser]].toSeq
-        val personas: Seq[IPersonaProps] = contributors.zipWithIndex.map {
-          case (user, i) => new PersonaProps(user, i).asJS
-        }
-        val order: Seq[Int] = centralizeContributors(personas.size);
+        val contributors = JSON.parse(value.responseText).asInstanceOf[js.Array[Contributor]].toSeq
+        val order: Seq[Int] = centralizeContributors(contributors.size)
+        val texts: Seq[String] = order map contributors.map(_.login)
+        val imageUrls: Seq[String] = order map contributors.map(_.avatar_url)
+        val secondaryTexts: Seq[String] = order map contributors.map(info => s"贡献: ${ info.contributions }")
         val hrefs: Seq[String] = order map contributors.map(_.html_url)
-        this.setState(State(order map personas, hrefs))
+        val isMain: Seq[Boolean] = order map (true :: List.fill(contributors.size - 1)(false))
+
+        val namesFuture = Future.traverse(texts)(getUserName)
+        namesFuture onComplete {
+          case Success(newTexts) => this.setState(State(newTexts, imageUrls, secondaryTexts, hrefs, isMain))
+          case Failure(_) => throw new Exception()
+        }
       }
       case Failure(_) => throw new Exception()
     }
   }
 
+  private def getUserName(login: String): Future[String] =
+    Ajax.get(s"https://api.github.com/users/$login").map {
+      response => {
+        val user = JSON.parse(response.responseText).asInstanceOf[GithubUser]
+        val name = user.name
+        if (name == null) login
+        else name
+      }
+    }
+
   final val headerDesc: String = "贡献者"
 
   private def renderPersona(): ReactElement = Stack.withProps(IStackProps()
@@ -56,7 +80,7 @@ class ContributorSection extends Component {
     .setHorizontalAlign(Alignment.center)
     .setClassName("Contributor-stack").asInstanceOf[IStackProps with Children])(
 
-    this.state.personas.map(Persona.withProps)
+    this.state.toPersonaProps.map(_.asJS).map(Persona.withProps)
   )
 
   private def addAForPersonas(): Unit = {
@@ -93,7 +117,7 @@ class ContributorSection extends Component {
   }
 
   override def render(): ReactElement = {
-    if (this.state.personas.nonEmpty)
+    if (this.state.isMain.nonEmpty)
       section(className := "Contributor")(
 
         h2(className := "Contributor-title", style := js.Dynamic.literal(
@@ -113,19 +137,22 @@ object ContributorSection {
   object ContributorCSS extends js.Object
 
   @js.native
-  trait GithubUser extends js.Object {
+  trait Contributor extends js.Object {
     val login: String
     val avatar_url: String
     val contributions: Int
     val html_url: String
   }
 
-  class PersonaProps(info: GithubUser, i: Int) {
-    val imageUrl: String = info.avatar_url
-    val text: String = info.login
-    val secondaryText: String = s"贡献: ${ info.contributions }"
+  @js.native
+  trait GithubUser extends js.Object {
+    val login: String
+    val name: String
+  }
+
+  case class PersonaProps(imageUrl: String, text: String, secondaryText: String, isMain: Boolean) {
 
-    def getSize: PersonaSize with Double = if (i == 0) mainSize else otherSize
+    def getSize: PersonaSize with Double = if (isMain) mainSize else otherSize
 
     def asJS: IPersonaProps = {
       val obj = IPersonaProps()
diff --git a/webpack/webpack-core.config.js b/webpack/webpack-core.config.js
@@ -46,7 +46,7 @@ module.exports = {
     devtoolModuleFilenameTemplate: (f) => {
       if (f.resourcePath.startsWith("http://") ||
           f.resourcePath.startsWith("https://") ||
-          f.resourcePath.startsWith("file:///")) {
+          f.resourcePath.startsWith("file://")) {
         return f.resourcePath;
       } else {
         return "webpack://" + f.namespace + "/" + f.resourcePath;

Original file line number	Diff line number	Diff line change
`@@ -4,7 +4,9 @@`
`4`	`4`
`5`	`5`	`.Header-logo {`
`6`	`6`	`text-align: center;`
`7`		`- height: 350px;`
	`7`	`+ height: auto;`
	`8`	`+ max-height: 350px;`
	`9`	`+ max-width: 100%;`
`8`	`10`	`}`
`9`	`11`
`10`	`12`	`.Header-header {`