add style for cla page

8e7f5c70 · edisonxiang · e5b76a7f · 8e7f5c70 · 8e7f5c70 · 8e7f5c70
5 changed file
--- a/content/en/cla.md
+++ b/content/en/cla.md
 +++
-title = "Signing Community CLA"
+title = "Signing CLA"
 +++
+<div class="clanote">
+<p>
 Before submitting any Contributions, you have to agree with all the terms and conditions of this Agreement and sign it as indicated below, and then upload the signed Agreement to designated place on openEuler official website. By signing this Agreement as indicated below, you agree to accept and be legally bound by this Agreement. The rights that you grant under this Agreement are effective on the date you first submitted a Contribution to the openEuler, even if your submission took place before the date you sign these Agreement.
+</p>
-1. You agree to be legally bound by openEuler Intellectual Property Rights Policy published on openEuler official website.
+<ol>
-2. You represent that:
+<li>
-    * Each of your Contributions is your original creation and you can legally grant the rights set out in this Agreement;
+You agree to be legally bound by openEuler Intellectual Property Rights Policy published on openEuler official website.
-    * To the best of your knowledge, each Contribution will not infringe any third party's copyrights, trademarks, patents, or other intellectual property rights.
+</li>
-3. This Agreement and any rights and liabilities herein shall be governed, construed and interpreted in accordance with the laws of P.R. China, without giving effect to principles of conflicts of law. Any dispute arising from or related to this Agreement shall be submitted to Shenzhen Longgang District People’s court and parties waive all objections to that jurisdiction and venue.
+<li>
-4. Please select one applicable statement from the following and fill in the blanks. DO NOT MARK BOTH:
+You represent that:
+<ul>
+<li>
+Each of your Contributions is your original creation and you can legally grant the rights set out in this Agreement;
+</li>
+<li>
+To the best of your knowledge, each Contribution will not infringe any third party's copyrights, trademarks, patents, or other intellectual property rights.
+</li>
+</ul>
+</li>
+<li>
+This Agreement and any rights and liabilities herein shall be governed, construed and interpreted in accordance with the laws of P.R. China, without giving effect to principles of conflicts of law. Any dispute arising from or related to this Agreement shall be submitted to Shenzhen Longgang District People’s court and parties waive all objections to that jurisdiction and venue.
+</li>
+<li>
+Please select one applicable statement from the following and fill in the blanks. DO NOT MARK BOTH:
+</li>
+</ol>
+</div>
 <table id="cla-type-table">
    <tr>
@@ -34,7 +53,7 @@ Before submitting any Contributions, you have to agree with all the terms and co
            Name*:
        </td>
        <td>
-            <input type="text" name="individual-name" required = "required" />
+            <input type="text" id="individual-name" class = "require" />
        </td>
    </tr>
    <tr>
@@ -42,7 +61,7 @@ Before submitting any Contributions, you have to agree with all the terms and co
            Mailing Address*:
        </td>
        <td>
-            <input type="text" id="individual-address" required = "required" />
+            <input type="text" id="individual-address" class = "require" />
        </td>
    </tr>
    <tr>
@@ -50,7 +69,7 @@ Before submitting any Contributions, you have to agree with all the terms and co
            Date*:
        </td>
        <td>
-            <input type="text" id="individual-date" required = "required" />
+            <input type="text" id="individual-date" class = "require" />
        </td>
    </tr>
    <tr>
@@ -58,7 +77,7 @@ Before submitting any Contributions, you have to agree with all the terms and co
            E-Mail*:
        </td>
        <td>
-            <input type="text" id="individual-email" required = "required" />
+            <input type="text" id="individual-email" class = "require" />
        </td>
    </tr>
    <tr>
@@ -66,7 +85,7 @@ Before submitting any Contributions, you have to agree with all the terms and co
            Telephone*:
        </td>
        <td>
-            <input type="text" id="individual-telephone" required = "required" />
+            <input type="text" id="individual-telephone" class = "require" />
        </td>
    </tr>
    <tr>
@@ -77,6 +96,11 @@ Before submitting any Contributions, you have to agree with all the terms and co
            <input type="text" id="individual-Fax" />
        </td>
    </tr>
+    <tr>
+        <td colspan="2">
+            * require field. Please make sure the E-Mail is related with your gitee account.
+        </td>
+    </tr>
 </table>
 <table id="legalentity-table">
@@ -90,7 +114,7 @@ Before submitting any Contributions, you have to agree with all the terms and co
            Authorized Representative*:
        </td>
        <td>
-            <input type="text" name="legalentity-name" required = "required" />
+            <input type="text" id="legalentity-name" class = "require" />
        </td>
    </tr>
    <tr>
@@ -98,7 +122,7 @@ Before submitting any Contributions, you have to agree with all the terms and co
            Title*:
        </td>
        <td>
-            <input type="text" id="individual-title" required = "required" />
+            <input type="text" id="legalentity-title" class = "require" />
        </td>
    </tr>
    <tr>
@@ -106,7 +130,7 @@ Before submitting any Contributions, you have to agree with all the terms and co
            Corporation Name*:
        </td>
        <td>
-            <input type="text" id="individual-corporation" required = "required" />
+            <input type="text" id="legalentity-corporation" class = "require" />
        </td>
    </tr>
    <tr>
@@ -114,7 +138,7 @@ Before submitting any Contributions, you have to agree with all the terms and co
            Mailing Address*:
        </td>
        <td>
-            <input type="text" id="individual-address" required = "required" />
+            <input type="text" id="legalentity-address" class = "require" />
        </td>
    </tr>
    <tr>
@@ -122,7 +146,7 @@ Before submitting any Contributions, you have to agree with all the terms and co
            Date*:
        </td>
        <td>
-            <input type="text" id="individual-date" required = "required" />
+            <input type="text" id="legalentity-date" class = "require" />
        </td>
    </tr>
    <tr>
@@ -130,7 +154,7 @@ Before submitting any Contributions, you have to agree with all the terms and co
            E-Mail*:
        </td>
        <td>
-            <input type="text" id="individual-email" />
+            <input type="text" id="legalentity-email" class = "require" />
        </td>
    </tr>
    <tr>
@@ -138,7 +162,7 @@ Before submitting any Contributions, you have to agree with all the terms and co
            Telephone*:
        </td>
        <td>
-            <input type="text" id="individual-telephone" />
+            <input type="text" id="legalentity-telephone" class = "require" />
        </td>
    </tr>
    <tr>
@@ -146,7 +170,12 @@ Before submitting any Contributions, you have to agree with all the terms and co
            Fax:
        </td>
        <td>
-            <input type="text" id="individual-Fax" />
+            <input type="text" id="legalentity-Fax" />
+        </td>
+    </tr>
+    <tr>
+        <td colspan="2">
+            * require field. Please make sure the E-Mail is related with your gitee account.
        </td>
    </tr>
 </table>
@@ -154,8 +183,17 @@ Before submitting any Contributions, you have to agree with all the terms and co
 <table id="cla-table">
    <tr>
        <td>
-            <input type="button" id="sign-cla-button" value="Sign"/>
+            <a href="#" id="sign-cla-button" class="btn btn-template-main">
-            <input type="button" id="reset-cla-button" value="Reset"/>
+                Sign
+            </a>
+            <a href="#" id="reset-cla-button" class="btn btn-template-main">
+                Reset
+            </a>
        </td>
    </tr>
-</table>
+    <tr>
\ No newline at end of file
+        <td>
+            <label id="tip-cla-label"></label>
+        </td>
+    </tr>
+</table>
--- a/content/zh/cla.md
+++ b/content/zh/cla.md
 +++
-title = "签署社区CLA"
+title = "签署CLA"
 +++
+<div class="clanote">
+<p>
 在提交任何贡献前，你必须同意本协议规定的所有条款并签署本协议，
 并将签署后的协议上传到openEuler官网指定地点。
 按照如下指示签署本协议后，表明你接受本协议并同意受其约束。
 你在本协议下授予的权利从你首次向openEuler提交代码之日起生效，
 即使你的代码贡献行为发生在本协议签署前。
+</p>
-1. 你同意接受openEuler 知识产权政策的法律约束。该政策公布在openEuler官方网站上。
+<ol>
-2. 你承诺：
+<li>
-    * 你的每次贡献都是你原创的你有根据本协议授权的法律权利；
+你同意接受openEuler 知识产权政策的法律约束。该政策公布在openEuler官方网站上。
-    * 尽你所知，每次贡献均不侵犯第三方的版权，商标，专利或其他知识产权。
+</li>
-3. 本贡献协议适用中华人民共和国法律并由深圳市龙岗区人民法院管辖。
+<li>
-4. 请选择一个可适用的陈述并填空。注意：不要同时选两个：
+你承诺：
+<ul>
+<li>
+你的每次贡献都是你原创的你有根据本协议授权的法律权利；
+</li>
+<li>
+尽你所知，每次贡献均不侵犯第三方的版权，商标，专利或其他知识产权。
+</li>
+</ul>
+</li>
+<li>
+本贡献协议适用中华人民共和国法律并由深圳市龙岗区人民法院管辖。
+</li>
+<li>
+请选择一个可适用的陈述并填空。注意：不要同时选两个：
+</li>
+</ol>
+</div>
 <table id="cla-type-table">
    <tr>
@@ -37,7 +56,7 @@ title = "签署社区CLA"
            姓名*:
        </td>
        <td>
-            <input type="text" name="individual-name" required = "required" />
+            <input type="text" id="individual-name" class = "require" />
        </td>
    </tr>
    <tr>
@@ -45,7 +64,7 @@ title = "签署社区CLA"
            地址*:
        </td>
        <td>
-            <input type="text" id="individual-address" required = "required" />
+            <input type="text" id="individual-address" class = "require" />
        </td>
    </tr>
    <tr>
@@ -53,7 +72,7 @@ title = "签署社区CLA"
            日期*:
        </td>
        <td>
-            <input type="text" id="individual-date" required = "required" />
+            <input type="text" id="individual-date" class = "require" />
        </td>
    </tr>
    <tr>
@@ -61,7 +80,7 @@ title = "签署社区CLA"
            邮箱*:
        </td>
        <td>
-            <input type="text" id="individual-email" required = "required" />
+            <input type="text" id="individual-email" class = "require" />
        </td>
    </tr>
    <tr>
@@ -69,7 +88,7 @@ title = "签署社区CLA"
            电话*:
        </td>
        <td>
-            <input type="text" id="individual-telephone" required = "required" />
+            <input type="text" id="individual-telephone" class = "require" />
        </td>
    </tr>
    <tr>
@@ -80,6 +99,11 @@ title = "签署社区CLA"
            <input type="text" id="individual-Fax" />
        </td>
    </tr>
+    <tr>
+        <td colspan="2">
+            * 必填。请确保邮箱与你的gitee账号绑定。
+        </td>
+    </tr>
 </table>
 <table id="legalentity-table">
@@ -93,7 +117,7 @@ title = "签署社区CLA"
            授权代表*:
        </td>
        <td>
-            <input type="text" name="legalentity-name" required = "required" />
+            <input type="text" id="legalentity-name" class = "require" />
        </td>
    </tr>
    <tr>
@@ -101,7 +125,7 @@ title = "签署社区CLA"
            职位*:
        </td>
        <td>
-            <input type="text" id="individual-title" required = "required" />
+            <input type="text" id="legalentity-title" class = "require" />
        </td>
    </tr>
    <tr>
@@ -109,7 +133,7 @@ title = "签署社区CLA"
            公司名*:
        </td>
        <td>
-            <input type="text" id="individual-corporation" required = "required" />
+            <input type="text" id="legalentity-corporation" class = "require" />
        </td>
    </tr>
    <tr>
@@ -117,7 +141,7 @@ title = "签署社区CLA"
            地址*:
        </td>
        <td>
-            <input type="text" id="individual-address" required = "required" />
+            <input type="text" id="legalentity-address" class = "require" />
        </td>
    </tr>
    <tr>
@@ -125,7 +149,7 @@ title = "签署社区CLA"
            日期*:
        </td>
        <td>
-            <input type="text" id="individual-date" required = "required" />
+            <input type="text" id="legalentity-date" class = "require" />
        </td>
    </tr>
    <tr>
@@ -133,7 +157,7 @@ title = "签署社区CLA"
            邮箱*:
        </td>
        <td>
-            <input type="text" id="individual-email" />
+            <input type="text" id="legalentity-email" class = "require" />
        </td>
    </tr>
    <tr>
@@ -141,15 +165,20 @@ title = "签署社区CLA"
            电话*:
        </td>
        <td>
-            <input type="text" id="individual-telephone" />
+            <input type="text" id="legalentity-telephone" class = "require" />
        </td>
    </tr>
    <tr>
        <td>
-            传真*:
+            传真:
        </td>
        <td>
-            <input type="text" id="individual-Fax" />
+            <input type="text" id="legalentity-Fax" />
+        </td>
+    </tr>
+    <tr>
+        <td colspan="2">
+            * 必填。请确保邮箱与你的gitee账号绑定。
        </td>
    </tr>
 </table>
@@ -157,8 +186,17 @@ title = "签署社区CLA"
 <table id="cla-table">
    <tr>
        <td>
-            <input type="button" id="sign-cla-button" value="签署"/>
+            <a href="#" id="sign-cla-button" class="btn btn-template-main">
-            <input type="button" id="reset-cla-button" value="重置"/>
+                签署
+            </a>
+            <a href="#" id="reset-cla-button" class="btn btn-template-main">
+                重置
+            </a>
+        </td>
+    </tr>
+    <tr>
+        <td>
+            <label id="tip-cla-label"></label>
        </td>
    </tr>
 </table>
\ No newline at end of file
--- a/themes/project/layouts/partials/scripts.html
+++ b/themes/project/layouts/partials/scripts.html
@@ -18,6 +18,7 @@
 <!-- used to for mobile -->
 <script src="{{ .Site.BaseURL }}js/flexible.js"></script>
 <script src="{{ .Site.BaseURL }}js/common.js"></script>
+<script src="{{ .Site.BaseURL }}js/cla.js"></script>
 <div id="mask" onclick="hideNav()"></div>
 <script type="text/javascript">

--- a/themes/project/static/css/custom.css
+++ b/themes/project/static/css/custom.css
@@ -545,12 +545,71 @@ footer .notice span {
  display: none;
 }
+.container #cla-type-table {
+  width: 50%;
+  min-width: 320px;
+  max-width: 420px;
+  margin: 0 40px;
+}
 .container #individual-table {
  display: block;
+  width: 70%;
+  min-width: 320px;
+  max-width: 800px;
+  margin: 0 40px;
 }
 .container #legalentity-table {
  display: none;
+  width: 70%;
+  min-width: 320px;
+  max-width: 800px;
+  margin: 0 40px;
+}
+.container #cla-table {
+  width: 70%;
+  min-width: 320px;
+  max-width: 800px;
+  margin: 0 40px 20px 40px;
+  text-align: center;
+}
+.container #cla-type-table tr,
+.container #individual-table tr,
+.container #legalentity-table tr,
+.container #cla-table tr {
+  height: 35px;
+}
+.container #individual-table tr td:first-child,
+.container #legalentity-table tr td:first-child {
+  width: 30%;
+}
+.container #individual-table tr input[type=text],
+.container #legalentity-table tr input[type=text] {
+  width: 80%;
+}
+.container #cla-type-table input[type=radio] {
+  margin-right: 10px;
+}
+.container .clanote {
+  line-height: 35px;
+}
+.container #sign-cla-button,
+.container #reset-cla-button {
+  width:80px;
+  margin: 0 20px;
+}
+.container #tip-cla-label {
+  margin-top: 10px;
+  color: #467fbf;
 }
 /*html {

--- a/themes/project/static/js/cla.js
+++ b/themes/project/static/js/cla.js
+$(function () {
+    initClaPage();
+    initCurrentDate();
+})
+function initCurrentDate() {
+    var now = new Date();
+    var year = now.getFullYear();
+    var month = now.getMonth();
+    var date = now.getDate();
+    month = month + 1;
+    if (month < 10) month = "0" + month;
+    if (date < 10) date = "0" + date;
+    time = year + "-" + month + "-" + date;
+    if ($('#individual-table').length) {
+        $('#individual-date').val(time);
+        $('#individual-date').attr("disabled", true);
+    }
+    if ($('#legalentity-table').length) {
+        $('#legalentity-date').val(time);
+        $('#legalentity-date').attr("disabled", true);
+    }
+}
+// init cla page
+function initClaPage() {
+    if ($('#cla-type-table').length) {
+        $('td', '#cla-type-table').click(function () {
+            // select checked
+            $('input[name="track"]').removeAttr('checked');
+            $(this).find('input[name="cla-type-radio"]').prop('checked', true);
+            // show or hide
+            v = $('input[name="cla-type-radio"]:checked').val();
+            if (v == 0) {
+                $('#individual-table').show();
+                $('#legalentity-table').hide();
+            } else {
+                $('#individual-table').hide();
+                $('#legalentity-table').show();
+            }
+        });
+    }
+    if ($('#sign-cla-button').length) {
+        $("#sign-cla-button").bind('click', function () {
+            v = $('input[name="cla-type-radio"]:checked').val();
+            var regphone = /^(\d{4}-|\d{3}-)?(\d{8}|\d{7})$/;
+            var regmobile = /^1\d{10}$/;
+            var regemail = /^[-_A-Za-z0-9]+@([_A-Za-z0-9]+\.)+[A-Za-z0-9]{2,3}$/;
+            $('#tip-cla-label').html('');
+            lang = $('html').attr('lang');
+            if (v == 0) {
+                // individual
+                var checkpass = true;
+                $("input[type=text]", "#individual-table").each(function (i) {
+                    if ($(this).hasClass("require")) {
+                        if ($(this).val() == "") {
+                            checkpass = false;
+                            return false;
+                        }
+                    }
+                    return true;
+                });
+                if (!checkpass) {
+                    if (lang == "zh-cn") {
+                        $('#tip-cla-label').html("必填字段缺失!");
+                    } else {
+                        $('#tip-cla-label').html("Required field is missing!");
+                    }
+                    return false;
+                }
+                var email = $('#individual-email').val();
+                if (!regemail.test(email)) {
+                    if (lang == "zh-cn") {
+                        $('#tip-cla-label').html("邮箱格式不正确!");
+                    } else {
+                        $('#tip-cla-label').html("E-Mail format is incorrent!");
+                    }
+                    return false;
+                }
+                var telephone = $('#individual-telephone').val();
+                if ((!regphone.test(telephone)) && (!regmobile.test(telephone))) {
+                    if (lang == "zh-cn") {
+                        $('#tip-cla-label').html("电话格式不正确!");
+                    } else {
+                        $('#tip-cla-label').html("Telephone format is incorrent!");
+                    }
+                    return false;
+                }
+            } else {
+                // legalentity
+                var checkpass = true;
+                $("input[type=text]", "#legalentity-table").each(function (i) {
+                    if ($(this).hasClass("require")) {
+                        if ($(this).val() == "") {
+                            checkpass = false;
+                            return false;
+                        }
+                    }
+                    return true;
+                });
+                if (!checkpass) {
+                    if (lang == "zh-cn") {
+                        $('#tip-cla-label').html("必填字段缺失!");
+                    } else {
+                        $('#tip-cla-label').html("Required field is missing!");
+                    }
+                    return false;
+                }
+                var email = $('#legalentity-email').val();
+                if (!regemail.test(email)) {
+                    if (lang == "zh-cn") {
+                        $('#tip-cla-label').html("邮箱格式不正确!");
+                    } else {
+                        $('#tip-cla-label').html("E-Mail format is incorrent!");
+                    }
+                    return false;
+                }
+                var telephone = $('#legalentity-telephone').val();
+                if ((!regphone.test(telephone)) && (!regmobile.test(telephone))) {
+                    if (lang == "zh-cn") {
+                        $('#tip-cla-label').html("电话格式不正确!");
+                    } else {
+                        $('#tip-cla-label').html("Telephone format is incorrent!");
+                    }
+                }
+            }
+            return false;
+        });
+    }
+    if ($('#reset-cla-button').length) {
+        $("#reset-cla-button").bind('click', function () {
+            $('input[type="text"]', '#individual-table').val('');
+            $('input[type="text"]', '#legalentity-table').val('');
+            $('#tip-cla-label').html('');
+            initCurrentDate();
+            return false;
+        });
+    }
+}