样式&预备获取评委群

templates/list.html

@@ -57,7 +57,8 @@
     .part1 {
       max-width: 500px;
       float: left;
-      padding-right: 25px;
+      padding-right: 10px;
+      position: relative;
     }
 
     .part2 {
@@ -74,17 +75,28 @@
       margin: 5px 5px 40px;
     }
 
-    .qbox-new {
+    .new .qbox {
       background: black;
       color: white;
     }
 
-    .qbox-new input,
-    .qbox-new textarea {
+    .judge .qbox {
+      background: white;
+      color: black;
+      padding: 5px 15px;
+    }
+
+    .twin.new .qbox input,
+    .twin.new .qbox textarea {
+      border-bottom: 2px solid;
       background: black;
       color: white;
+    }
+
+    .twin .qbox input,
+    .twin .qbox textarea {
       border: none;
-      border-bottom: 2px white solid;
+      border-bottom: 1px solid;
       border-radius: 0;
     }
 
@@ -114,23 +126,44 @@
       padding: 0.75em;
     }
 
-    .new {
+    .behind {
+      z-index: 98;
+      cursor: pointer;
+    }
+
+    .front {
+      z-index: 99;
+    }
+
+    .judge {
+      position: absolute;
+      top: 0;
+      right: 0;
+      margin: 0 0 30px 20px;
+      width: 90%;
+    }
+    .twin {
       overflow: hidden;
+    }
+
+    .new {
       position: relative;
-      margin-bottom: 30px;
+      margin: 20px 20px 30px 0;
     }
 
-    .new-collapse {
+    .twin-collapse {
       max-height: 360px;
     }
 
     .show-mask {
       display: block;
       position: absolute;
-      top: 0;
+      top: 20px;
+      right: 35px;
       text-align: center;
-      padding-top: 320px;
+      padding-top: 330px;
       width: 100%;
+      z-index: 999;
     }
 
     .footer {
@@ -156,9 +189,9 @@
 
     <div class="part1">
 
-      <div id="new" class="new new-collapse">
+      <div id="new" class="new twin-collapse twin front">
         <form action="new" method="post">
-          <div class="form-group qbox qbox-new">
+          <div class="form-group qbox">
             <h1 style="margin: -14px -13px 20px">自荐提名</h1>
             <textarea class="form-control" name="text" rows="5" maxlength="4000" placeholder="
 一段自我陈述，
@@ -179,7 +212,7 @@
             <div class="form-group row">
               <label for="{{v.name}}" class="col-sm-8 col-form-label">{{v.ques}}</label>
               <div class="col-sm-4">
-                <input type="text" class="form-control" id="{{v.name}}" name="{{v.name}}" placeholder="{{v.hint}}" required="required">
+                <input type="text" class="form-control" name="{{v.name}}" placeholder="{{v.hint}}" required="required">
               </div>
             </div>
             {% endfor %}
@@ -190,25 +223,73 @@
         <div style="font-size:80%;">
           <ul>
             <li>如需附上补充材料，请使用清华云盘。为了避免泄露姓名推荐使用<a href="/safeShare" target="_blank">safeShare</a>。其他云盘是不被接受的。</li>
-            <li>需要回答几个简单的问题以初步验证学生身份，入围后的线上答辩环节将于<a href="https://thu.closed.social/">闭社</a>进行（需清华邮箱注册）以正式验证身份。</li>
+            <li>需要回答几个简单的问题以初步验证学生身份，入围后的线上答辩环节将于<a href="https://thu.closed.social/">闭社</a>平台进行（需清华邮箱注册）以正式验证身份。</li>
             <li>如果出错（例如验证问题答错了），请回退，多数浏览器都会恢复之前填写的内容。</li>
             <li>获得五个赞并留下联系方式（如微信号、手机号或邮箱）者被视为正式提名，会有工作人员与之联系并发放奖品。</li>
-			<li>下方的评论来自闭社用户，想要评论的话请前往<a href="https://thu.closed.social/">闭社</a>。</li>
-			<li>如需删除报名，请联系工作人员。</li>
+            <li>点击倒三角按钮展开评论，发布评论请前往<a href="https://thu.closed.social/">闭社</a>。</li>
+            <li>如需删除报名，请联系工作人员（微信:ordinary_thuer）。</li>
           </ul>
         </div>
 
-        <a href="##" onclick="showNew()" class="show-mask">
-          <span><svg fill="#fff" viewBox="0 12 24 48" width="24">
-              <path d="m0 24 l12 18 l12 -18 z"></path>
-            </svg></span>
-        </a>
+      </div>
 
+      <div class="judge twin-collapse twin behind">
+        <form action="judge" method="post">
+          <div class="form-group qbox">
+            <h1 style="text-align:right;margin:-12px -20px 20px">成为评委</h1>
+            <div style="font-size:80%">
+              <p>为了更好地选出十位普通人的代表，为了更好地展现大众的声音，我们希望招募更多的评委。</p>
+              <p>成为评委的条件：</p>
+              <ul>
+                <li>是华清大学在读学生</li>
+                <li>没有报名参选</li>
+                <li>愿意对所有报名者进行评分</li>
+              </ul>
+              <p>我们原则上不拒绝任何的评委报名。</p>
+              <p>目前在三个平台上建了三个评委群，分别是闭聊(Matrix)，Telegram，微信。前两个消息自动同步，加入哪个都是等价的，微信群与另外两个群不连通。(注意Telegram墙内不可直接访问。闭聊由闭社提供，使用闭社帐号登陆，如使用其他服务器上的Matrix帐号加群需要验证华清身份。)</p>
+              <p>选择想加入的群，完成验证，进入评委群。如果不愿意加群，也可以私信主办方保持沟通和上传打分结果。</p>
+            </div>
+
+            <div style="text-align:center">
+              <div class="form-check form-check-inline">
+                <input class="form-check-input" type="radio" name="groupType" value="mx">
+                <label class="form-check-label" for="mx">闭聊</label>
+              </div>
+              <div class="form-check form-check-inline">
+                <input class="form-check-input" type="radio" name="groupType" value="tg">
+                <label class="form-check-label" for="tg">Telegram</label>
+              </div>
+              <div class="form-check form-check-inline">
+                <input class="form-check-input" type="radio" name="groupType" value="wx">
+                <label class="form-check-label" for="wx">微信</label>
+              </div>
+            </div>
+            <hr/>
+            {% for v in vs %}
+            <div class="form-group row">
+              <label for="{{v.name}}" class="col-sm-8 col-form-label">{{v.ques}}</label>
+              <div class="col-sm-4">
+                <input type="text" class="form-control" name="{{v.name}}" placeholder="{{v.hint}}" required="required">
+              </div>
+            </div>
+            {% endfor %}
+            <p>(火热开发中... 马上就可以点了)</p>
+          </div>
+        </form>
       </div>
 
+      <a href="##" onclick="showNew()" class="show-mask">
+        <span>
+          <svg fill="#fff" viewBox="0 12 24 48" width="24">
+            <path d="m0 24 l12 18 l12 -18 z"></path>
+          </svg>
+        </span>
+      </a>
+
+
       <script>
         function showNew() {
-          $('#new').removeClass('new-collapse');
+          $('.twin').removeClass('twin-collapse');
           $('.show-mask').hide();
         }
       </script>
@@ -228,7 +309,7 @@
       </div>
       {% for c in pagination.items %}
       <div class="qbox">
-        <small>#{{c.id}}</small>
+        <small>No. {{c.id}}</small>
         <pre class="inner">{{c.content}}</pre>
         {% if showPrivate %}
         <hr />
@@ -325,6 +406,15 @@
 $(document).ready(function(){
   $('.timeago').timeago();
 
+  $('.twin').click((e) => {
+    if($(e.currentTarget).hasClass('front'))
+      return;
+    let behind_box = $('.behind');
+    let front_box = $('.front');
+    behind_box.toggleClass('behind front');
+    front_box.toggleClass('front behind');
+  });
+
   $('.collapse').on('show.bs.collapse', (e) => {
     let self = e.target;
     let toot = self.id.split('-')[1];