server/src/main/webapp/WEB-INF/templates/projectIndex.html
changeset 81 555a094e2000
parent 80 5295e118320b
child 86 0fe9045d25b7
equal deleted inserted replaced
80:5295e118320b 81:555a094e2000
     6         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     6         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     7         <meta charset="utf-8"/>
     7         <meta charset="utf-8"/>
     8         <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
     8         <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
     9 
     9 
    10         <link rel="shortcut icon" href="favicon.ico"/>
    10         <link rel="shortcut icon" href="favicon.ico"/>
    11         <script src="lib/jquery.min.js" th:src="@{/static/lib/jquery.min.js}" ></script>
    11         <script src="../../lib/jquery.min.js" th:src="@{/static/lib/jquery.min.js}" ></script>
    12         <script src="lib/underscore-min.js" th:src="@{/static/lib/underscore-min.js}" ></script>
    12         <script src="../../lib/underscore-min.js" th:src="@{/static/lib/underscore-min.js}" ></script>
    13         <script src="js/main.js" th:src="@{/static/js/main.js}" ></script>
    13         <script src="../../js/main.js" th:src="@{/static/js/main.js}" ></script>
    14 
    14 
    15         <style>
    15         <link href="../../static/css/index.css" rel="stylesheet" th:href="@{/static/css/index.css}"/> 
    16         /*<![CDATA[*/
       
    17             body {
       
    18               margin: 0;
       
    19               height: 100%;
       
    20               color: #333;
       
    21               font: 14px helvetica, sans-serif;
       
    22               background: #ddd;
       
    23               background: -webkit-radial-gradient(circle,#aaa,#eee 60%) center fixed;
       
    24               background: -moz-radial-gradient(circle,#aaa,#eee 60%) center fixed;
       
    25               background: -ms-radial-gradient(circle,#aaa,#eee 60%) center fixed;
       
    26               background: -o-radial-gradient(circle,#aaa,#eee 60%) center fixed;
       
    27               border-top: 8px solid rgba(51,51,51,.8);
       
    28             }
       
    29             #wrapper {
       
    30               border-top: 1px solid #999;
       
    31               margin-top: 160px;
       
    32               padding: 15px;
       
    33               background: #eee;
       
    34               background: -webkit-linear-gradient(#fff,#ccc);
       
    35               background: -moz-linear-gradient(#fff,#ccc);
       
    36               background: -ms-linear-gradient(#fff,#ccc);
       
    37               background: -o-linear-gradient(#fff,#ccc);
       
    38               opacity: .9;
       
    39               box-shadow: 0px 1px 8px rgba(0,0,0,0.3);
       
    40             }
       
    41             #inner {
       
    42               width: 350px;
       
    43               margin: 0 auto;
       
    44             }
       
    45             #button {
       
    46               margin: 0 auto;
       
    47               border-radius: 3px;
       
    48               text-align: center;
       
    49               font: 36px verdana,arial,sans-serif;
       
    50               color: white;
       
    51               text-shadow: 0 -1px 0 rgba(0,0,0,.8);
       
    52               height: 70px;
       
    53               line-height: 70px;
       
    54               background: #555;
       
    55               background: -webkit-linear-gradient(#5F5F5F,#565656 50%,#4C4C4C 51%,#373737);
       
    56               background: -moz-linear-gradient(#5F5F5F,#565656 50%,#4C4C4C 51%,#373737);
       
    57               background: -ms-linear-gradient(#5F5F5F,#565656 50%,#4C4C4C 51%,#373737);
       
    58               background: -o-linear-gradient(#5F5F5F,#565656 50%,#4C4C4C 51%,#373737);
       
    59               box-shadow: inset 0 1px 3px rgba(0,0,0,0.9);
       
    60             }
       
    61             #button:hover {
       
    62               cursor: pointer;
       
    63               background: #666;
       
    64               background: -webkit-linear-gradient(#707070,#666666 50%,#5B5B5B 51%,#474747);
       
    65               background: -moz-linear-gradient(#707070,#666666 50%,#5B5B5B 51%,#474747);
       
    66               background: -ms-linear-gradient(#707070,#666666 50%,#5B5B5B 51%,#474747);
       
    67               background: -o-linear-gradient(#707070,#666666 50%,#5B5B5B 51%,#474747);
       
    68             }
       
    69             #button:active {
       
    70               box-shadow: inset 0 1px 12px rgba(0,0,0,0.9);
       
    71               background: #444;
       
    72             }
       
    73             #label {
       
    74               text-align: left;
       
    75               text-shadow: 0 1px 1px #fff;
       
    76               margin: 16px auto 0;
       
    77             }
       
    78             form {
       
    79               height: 38px;
       
    80               background: #fff;
       
    81               border: 1px solid #bbb;
       
    82               border-radius: 3px;
       
    83               position: relative;
       
    84             }
       
    85             button, input {
       
    86               font-weight: bold;
       
    87               font-size: 15px;
       
    88             }
       
    89             input[type="text"] {
       
    90               border-radius: 3px;
       
    91               box-sizing: border-box;
       
    92               -moz-box-sizing: border-box;   
       
    93               padding: 0 45px 0 10px;
       
    94               *padding: 0; /* IE7 hack */
       
    95               width: 100%;
       
    96               height: 100%;
       
    97               outline: none;
       
    98               border: none;
       
    99               position: absolute;
       
   100             }
       
   101             button[type="submit"] {
       
   102               position: absolute;
       
   103               right: 0;
       
   104               width: 45px;
       
   105               height: 38px;
       
   106             }
       
   107             @media only screen and (min-device-width: 320px) and (max-device-width: 720px) {
       
   108               body {
       
   109                 background: #bbb;
       
   110                 background: -webkit-linear-gradient(#aaa,#eee 60%) center fixed;
       
   111                 background: -moz-linear-gradient(#aaa,#eee 60%) center fixed;
       
   112                 background: -ms-linear-gradient(#aaa,#eee 60%) center fixed;
       
   113               }
       
   114               #wrapper {
       
   115                 margin-top: 0;
       
   116               }
       
   117               #inner {
       
   118                 width: 95%;        
       
   119               }
       
   120               #label {
       
   121                 text-align: center;
       
   122               }
       
   123             }
       
   124         /*]]>*/
       
   125         </style>
       
   126         <link href="static/css/index.css" rel="stylesheet" th:href="@{/static/css/index.css}"/> 
       
   127     </head>
    16     </head>
   128     <body>
    17     <body>
   129         <div id="wrapper">
    18         <div id="wrapper">
       
    19         	<h1><span th:text="#{renkanIndex.renkan_space}">Renkan Space</span>: <span th:text="${space.title}">Titre</span></h1>
   130             <div id="inner">
    20             <div id="inner">
   131                 <div id="button" onclick="go2Random()" class="translate" th:utext="#{renkanIndex.new_renkan}">New Renkan</div>
    21                 <div id="button" onclick="go2Random()" class="translate" th:utext="#{renkanIndex.new_renkan}">New Renkan</div>
   132                 <div id="label" class="translate" th:text="#{renkanIndex.renkan_exp}">Create a Renkan with the title</div> 
    22                 <div id="label" class="translate" th:text="#{renkanIndex.renkan_exp}">Create a Renkan with the title</div> 
   133                 <form action="#" onsubmit="go2Title();return false;"> 
    23                 <form action="#" onsubmit="go2Title();return false;"> 
   134                     <input type="text" id="renkantitle" autofocus="autofocus" x-webkit-speech="x-webkit-speech"/> 
    24                     <input type="text" id="renkantitle" autofocus="autofocus" x-webkit-speech="x-webkit-speech"/> 
   141               <thead>
    31               <thead>
   142                 <tr>
    32                 <tr>
   143                     <th th:text="#{renkanIndex.project_name}">Name</th>
    33                     <th th:text="#{renkanIndex.project_name}">Name</th>
   144                     <th th:text="#{renkanIndex.project_creation}">Creation</th>
    34                     <th th:text="#{renkanIndex.project_creation}">Creation</th>
   145                     <th th:text="#{renkanIndex.project_edit}">Edit</th>
    35                     <th th:text="#{renkanIndex.project_edit}">Edit</th>
   146                     <th th:text="#{renkanIndex.project_render}">render</th>
    36                     <th th:text="#{renkanIndex.project_render}">View</th>
   147                 </tr>
    37                 </tr>
   148               </thead>
    38               </thead>
   149               <tbody>
    39               <tbody>
   150                 <tr th:each="project: ${page}">
    40                 <tr th:each="project: ${page}">
   151                   <th th:text="${project.title}">title</th>
    41                   <th th:text="${project.title}">title</th>
   152                   <td th:text="${#dates.format(project.created, #messages.msg('date.format'))}">date</td>
    42                   <td th:text="${#dates.format(project.created, #messages.msg('date.format'))}">date</td>
   153                   <td><a href="#" th:href="@{'/p/'+${project.id}(cowebkey=${project.getKey(2)})}" th:text="#{renkanIndex.project_edit_link}">Edit projet</a></td>
    43                   <td><a href="#" th:href="@{'/p/'+${project.id}(cowebkey=${project.getKey(2)})}" th:text="#{renkanIndex.project_edit_link}">Edit project</a></td>
   154                   <td><a href="#" th:href="@{'/p/pub/'+${project.id}(cowebkey=${project.getKey(1)})}" th:text="#{renkanIndex.project_render_link}">Render projet</a></td>
    44                   <td><a href="#" th:href="@{'/p/pub/'+${project.id}(cowebkey=${project.getKey(1)})}" th:text="#{renkanIndex.project_render_link}">View project</a></td>
   155                 </tr>
    45                 </tr>
   156               </tbody>
    46               </tbody>
   157             </table>            
    47             </table>            
   158         </div>
    48         </div>
   159         <script th:inline="javascript" >
    49         <script th:inline="javascript" >