WIP: reconstruct layouts

* user settings

lib/locales/en-US/translation.json

@@ -48,6 +48,7 @@
 
   "User ID": "User ID",
   "Home": "Home",
+  "User Settings": "User Settings",
   "User Information": "User Information",
   "Basic Info": "Basic Info",
   "Name": "Name",

lib/locales/ja/translation.json

@@ -45,6 +45,7 @@
 
   "User ID": "ユーザーID",
   "Home": "ホーム",
+  "User Settings": "ユーザー設定",
   "User Information": "ユーザー情報",
   "Basic Info": "ユーザーの基本情報",
   "Name": "名前",

lib/views/me/api_token.html

@@ -6,7 +6,7 @@
 {% block content_header %}
 <div class="header-wrap">
   <header id="page-header">
-  <h1 class="title" id="">{{ t('Home') }}</h1>
+  <h1 class="title" id="">{{ t('API Settings') }}</h1>
   </header>
 </div>
 {% endblock %}
@@ -40,7 +40,7 @@
   </div>
   {% endif %}
 
-  <div id="form-box">
+  <div class="form-box m-t-20">
 
     <form action="/me/apiToken" method="post" class="form-horizontal" role="form">
     <fieldset>
@@ -59,7 +59,7 @@
       </div>
 
       <div class="form-group">
-        <div class="col-xs-offset-3 col-xs-10">
+        <div class="col-xs-offset-3 col-xs-9">
 
           <p class="alert alert-warning">
             {{ t('page_me_apitoken.notice.update_token1') }}<br>

lib/views/me/external-accounts.html

@@ -5,7 +5,7 @@
 {% block content_header %}
 <div class="header-wrap">
   <header id="page-header">
-    <h1 class="title" id="">{{ t('Home') }}</h1>
+    <h1 class="title" id="">{{ t('Password Settings') }}</h1>
   </header>
 </div>
 {% endblock %}
@@ -58,9 +58,9 @@
 
 
 
-  <legend style="line-height: 1.7em;">
+  <legend class="m-t-20" style="line-height: 1.7em;">
     <button class="btn btn-default btn-sm pull-right" data-target="#create-external-account" data-toggle="modal">
-      <i class="fa fa-plus-circle" aria-hidden="true"></i>
+      <i class="icon-plus" aria-hidden="true"></i>
       Add
     </button>
     {{ t('External Accounts') }}
@@ -120,23 +120,23 @@
 
           <ul class="nav nav-tabs passport-settings" role="tablist">
             <li class="active">
-              <a href="#passport-ldap" data-toggle="tab" role="tab"><i class="fa fa-sitemap"></i> LDAP</a>
+              <a href="#passport-ldap" data-toggle="tab" role="tab"><i class="icon-organization"></i> LDAP</a>
             </li>
             <li>
-              <a href="#passport-google-oauth" data-toggle="tab" role="tab"><i class="fa fa-google"></i> Google OAuth</a>
+              <a href="#passport-google-oauth" data-toggle="tab" role="tab"><i class="icon-social-google"></i> Google OAuth</a>
             </li>
             <li>
-              <a href="#passport-facebook" data-toggle="tab" role="tab"><i class="fa fa-facebook"></i> Facebook</a>
+              <a href="#passport-facebook" data-toggle="tab" role="tab"><i class="icon-social-facebook"></i> Facebook</a>
             </li>
             <li>
-              <a href="#passport-twitter" data-toggle="tab" role="tab"><i class="fa fa-twitter"></i> Twitter</a>
+              <a href="#passport-twitter" data-toggle="tab" role="tab"><i class="icon-social-twitter"></i> Twitter</a>
             </li>
             <li>
-              <a href="#passport-github" data-toggle="tab" role="tab"><i class="fa fa-github"></i> Github</a>
+              <a href="#passport-github" data-toggle="tab" role="tab"><i class="icon-social-github"></i> Github</a>
             </li>
           </ul>
 
-          <div class="tab-content passport-settings">
+          <div class="tab-content passport-settings m-t-15">
             <div id="passport-ldap" class="tab-pane active" role="tabpanel" >
               <div id="formLdapAssociationContainer">
                 {% include '../widget/passport/ldap-association-tester.html' %}

lib/views/me/index.html

@@ -1,11 +1,11 @@
 {% extends '../layout-growi/base/layout.html' %}
 
-{% block html_title %}{{ t('Home') }} · {{ path }}{% endblock %}
+{% block html_title %}{{ t('User Settings') }} · {{ path }}{% endblock %}
 
 {% block content_header %}
 <div class="header-wrap">
   <header id="page-header">
-    <h1 class="title" id="">{{ t('Home') }}</h1>
+    <h1 class="title" id="">{{ t('User Settings') }}</h1>
   </header>
 </div>
 {% endblock %}
@@ -47,7 +47,7 @@
   {% endif %}
 
 
-  <div class="form-box">
+  <div class="form-box m-t-20">
     <form action="/me" method="post" class="form-horizontal" role="form">
       <fieldset>
         <legend>{{ t('Basic Info') }}</legend>
@@ -91,7 +91,7 @@
     </form>
   </div>
 
-  <div class="form-box">
+  <div class="form-box m-t-20">
 
     <!-- separeted form tag -->
     <form action="/me/imagetype" id="formImageType" method="post" class="form" role="form"></form>

lib/views/me/password.html

@@ -5,7 +5,7 @@
 {% block content_header %}
 <div class="header-wrap">
   <header id="page-header">
-    <h1 class="title" id="">{{ t('Home') }}</h1>
+    <h1 class="title" id="">{{ t('Password Settings') }}</h1>
   </header>
 </div>
 {% endblock %}
@@ -45,7 +45,7 @@
   </div>
   {% endif %}
 
-  <div id="form-box">
+  <div id="form-box" class="m-t-20">
 
     <form action="/me/password" method="post" class="form-horizontal" role="form">
     <fieldset>
@@ -79,7 +79,7 @@
 
 
       <div class="form-group">
-        <div class="col-xs-offset-2 col-xs-10">
+        <div class="text-center">
           <button type="submit" class="btn btn-primary">{{ t('Update') }}</button>
         </div>
       </div>

resource/styles/agile-admin/inverse/eliteadmin.scss

@@ -665,9 +665,10 @@ label{
 .input-group-btn .btn {
     padding: 8px 12px;
 }
+/* reset to bootstrap default
 .form-horizontal .form-group{ margin-left:-7.5px; margin-right:-7.5px; margin-bottom:25px;}
 .form-group{ margin-bottom:25px;}
-
+*/
 .select2-container-multi .select2-choices{ border: 1px solid $light;
 }
 .list-group-item, .list-group-item:first-child, .list-group-item:last-child{ border-radius:$radius; border-color:$border;}