0.1.0.2

.idea/workspace.xml

@@ -13,6 +13,8 @@
     <list default="true" id="78c692f3-8e9f-49c7-86c1-0c5e9d711b1f" name="Default Changelist" comment="0.1.0.2">
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/App.css" beforeDir="false" afterPath="$PROJECT_DIR$/src/App.css" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/components/Qrcode.css" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/Qrcode.css" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/components/Qrcode.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/Qrcode.js" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -83,7 +85,7 @@
       <option name="presentableId" value="Default" />
       <updated>1588240852207</updated>
       <workItem from="1588240855414" duration="15673000" />
-      <workItem from="1588305721761" duration="23650000" />
+      <workItem from="1588305721761" duration="26719000" />
     </task>
     <task id="LOCAL-00001" summary="0.1.0.1">
       <created>1588308749650</created>
@@ -330,7 +332,14 @@
       <option name="project" value="LOCAL" />
       <updated>1588338498869</updated>
     </task>
-    <option name="localTasksCounter" value="36" />
+    <task id="LOCAL-00036" summary="0.1.0.2">
+      <created>1588338725028</created>
+      <option name="number" value="00036" />
+      <option name="presentableId" value="LOCAL-00036" />
+      <option name="project" value="LOCAL" />
+      <updated>1588338725028</updated>
+    </task>
+    <option name="localTasksCounter" value="37" />
     <servers />
   </component>
   <component name="TypeScriptGeneratedFilesManager">
@@ -358,10 +367,10 @@
       <screen x="0" y="23" width="2541" height="1057" />
     </state>
     <state x="1161" y="421" key="#Notifications/428.1103.1680.1027/0.23.2541.1057/-1600.203.1600.877@0.23.2541.1057" timestamp="1588307553058" />
-    <state x="870" y="291" key="Vcs.Push.Dialog.v2" timestamp="1588338517711">
+    <state x="870" y="291" key="Vcs.Push.Dialog.v2" timestamp="1588338730401">
       <screen x="0" y="23" width="2541" height="1057" />
     </state>
-    <state x="870" y="291" key="Vcs.Push.Dialog.v2/428.1103.1680.1027/0.23.2541.1057/-1600.203.1600.877@0.23.2541.1057" timestamp="1588338517711" />
+    <state x="870" y="291" key="Vcs.Push.Dialog.v2/428.1103.1680.1027/0.23.2541.1057/-1600.203.1600.877@0.23.2541.1057" timestamp="1588338730401" />
     <state x="997" y="347" key="git4idea.merge.GitPullDialog" timestamp="1588322703667">
       <screen x="0" y="23" width="2541" height="1057" />
     </state>

src/components/Qrcode.css

@@ -10,6 +10,10 @@
 .Qr-titled-nobg {
     padding-top: calc((10px + 2vmin) * 2);
     padding-bottom: calc((10px + 2vmin) * 2);
+    -webkit-transition-timing-function: ease-in-out;
+    transition-timing-function: ease-in-out;
+    -webkit-transition-duration: 0.2s; /* Safari */
+    transition-duration: 0.2s;
 }
 
 .Qr-title {
@@ -123,6 +127,7 @@ tr {
     width: 100%;
     display: inline-flex;
     justify-content: space-between ;
+    align-items: center;
 }
 
 td:nth-child(1) {
@@ -139,17 +144,29 @@ td {
     padding-bottom: 10px;
 }
 
+table {
+    margin-bottom: -10px;
+}
+
 .big-input {
     font-size: calc(10px + 2vmin);
     margin-top: calc((10px + 2vmin) * 2);
     margin-bottom: calc((10px + 2vmin) * 2);
     border: rgba(0,0,0,0.12) solid 3px;
     width: 20em;
+    max-width: calc(100vw - 46px);
 }
 
 .small-input {
-    font-size: 0.8em;
+    font-size: 0.9em;
-    border: rgba(0,0,0,0.12) solid 2px;
+    border: rgba(0,0,0,0.12) solid 3px;
+    width: calc((100vw - 56px) / 2);
+}
+
+@media (min-width: 500px) {
+    .small-input {
+        width: 200px;
+    }
 }
 
 .Qr-input {
@@ -160,7 +177,6 @@ td {
     border-radius: 3em;
     outline: none;
     text-indent: 1em;
-    max-width: calc(100vw - 46px);
     overflow: visible;
     -webkit-transition-timing-function: ease-in-out;
     transition-timing-function: ease-in-out;
@@ -197,5 +213,59 @@ td {
 }
 
 .Qr-div-table {
-    max-width: 600px;
+    max-width: 410px;
+}
+
+.div-btn {
+    white-space: nowrap;
+    overflow-x: hidden;
+    display: flex;
+    justify-content: space-between;
+}
+
+.dl-btn {
+    float: left;
+    font-size: 1em;
+    line-height: 1em;
+    margin: 0;
+    width: calc((100vw - 56px) / 2);
+    height: 2em;
+    border-radius: 3em;
+    outline: none;
+    padding: 0;
+    box-sizing: border-box;
+    border: rgba(0,0,0,0.12) solid 3px;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-timing-function: ease-in-out;
+    -webkit-transition-duration: 0.2s; /* Safari */
+    transition-duration: 0.2s;
+    -webkit-appearance: none;
+    -webkit-text-size-adjust: 100%;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+    background: white;
+    font-family: 'Futura', sans-serif;
+    color: rgba(0,0,0,0.6);
+}
+
+.dl-btn:hover {
+    border-color: #44D7B6;
+    color: #44D7B6;
+}
+
+.dl-btn:active {
+    -webkit-transition-duration: 0s; /* Safari */
+    transition-duration: 0s;
+    border-color: #3BBC9F;
+    color: #3BBC9F;
+}
+
+@media (min-width: 500px) {
+    .div-btn {
+        max-width: 410px;
+    }
+
+    .dl-btn {
+        width: 200px;
+        height: 2em;
+    }
 }

src/components/Qrcode.js

@@ -98,6 +98,19 @@ class Qrcode extends React.Component {
                         </div>
                     </div>
                 </div>
+                <div className="Qr-titled">
+                    <div className="Qr-Centered title-margin">
+                        <div className="Qr-s-title">Downloads</div>
+                        <p className="Qr-s-subtitle">下载二维码</p>
+                    </div>
+                    <div className="Qr-Centered">
+                        <div className="div-btn">
+                            <button className="dl-btn">SVG</button>
+                            <button className="dl-btn">JPG</button>
+                        </div>
+
+                    </div>
+                </div>
             </div>
         );
     }