UI optimisation
This commit is contained in:
Redmine Web01
parent
5d32a0239f
commit
e2bde9d270
BIN
images/logo.png
BIN
images/logo.png
Binary file not shown.
|
Before Width: | Height: | Size: 2.7 KiB After Width: | Height: | Size: 804 B |
BIN
images/logo2.png
Normal file
BIN
images/logo2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 247 B |
BIN
images/logo3.png
Normal file
BIN
images/logo3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 964 B |
104
redmine/layouts/base.html.erb
Normal file
104
redmine/layouts/base.html.erb
Normal file
|
|
@ -0,0 +1,104 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="<%= current_language %>">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title><%=h html_title %></title>
|
||||
<meta name="description" content="<%= Redmine::Info.app_name %>" />
|
||||
<meta name="keywords" content="issue,bug,tracker" />
|
||||
<%= csrf_meta_tag %>
|
||||
<%= favicon %>
|
||||
<%= stylesheet_link_tag 'jquery/jquery-ui-1.11.0', 'application', :media => 'all' %>
|
||||
<%= stylesheet_link_tag 'rtl', :media => 'all' if l(:direction) == 'rtl' %>
|
||||
<%= javascript_heads %>
|
||||
<%= heads_for_theme %>
|
||||
<%= call_hook :view_layouts_base_html_head %>
|
||||
<!-- page specific tags -->
|
||||
<%= yield :header_tags -%>
|
||||
</head>
|
||||
<body class="<%=h body_css_classes %>">
|
||||
<div id="wrapper">
|
||||
<div id="wrapper2">
|
||||
<div id="wrapper3">
|
||||
<div id="top-menu">
|
||||
<div id="account">
|
||||
<%= render_menu :account_menu -%>
|
||||
</div>
|
||||
<%= content_tag('div', "#{l(:label_logged_as)} #{link_to_user(User.current, :format => :username)}".html_safe, :id => 'loggedas') if User.current.logged? %>
|
||||
<%= render_menu :top_menu if User.current.logged? || !Setting.login_required? -%>
|
||||
</div>
|
||||
|
||||
<div id="header">
|
||||
<% if User.current.logged? || !Setting.login_required? %>
|
||||
<div id="quick-search">
|
||||
<%= form_tag({:controller => 'search', :action => 'index', :id => @project}, :method => :get ) do %>
|
||||
<%= hidden_field_tag(controller.default_search_scope, 1, :id => nil) if controller.default_search_scope %>
|
||||
<label for='q'>
|
||||
<%= link_to l(:label_search), {:controller => 'search', :action => 'index', :id => @project}, :accesskey => accesskey(:search) %>:
|
||||
</label>
|
||||
<%= text_field_tag 'q', @question, :size => 20, :class => 'small', :accesskey => accesskey(:quick_search) %>
|
||||
<% end %>
|
||||
<%= render_project_jump_box %>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
<h1><%= page_header_title %></h1>
|
||||
|
||||
<% if display_main_menu?(@project) %>
|
||||
<div id="main-menu">
|
||||
<%= render_main_menu(@project) %>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
|
||||
<div id="main" class="<%= sidebar_content? ? '' : 'nosidebar' %>">
|
||||
<div id="sidebar">
|
||||
<%= yield :sidebar %>
|
||||
<%= view_layouts_base_sidebar_hook_response %>
|
||||
</div>
|
||||
|
||||
<div id="content">
|
||||
<%= render_flash_messages %>
|
||||
<%= yield %>
|
||||
<%= call_hook :view_layouts_base_content %>
|
||||
<div style="clear:both;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="ajax-indicator" style="display:none;"><span><%= l(:label_loading) %></span></div>
|
||||
<div id="ajax-modal" style="display:none;"></div>
|
||||
|
||||
<div id="footer">
|
||||
<div class="bgl"><div class="bgr">
|
||||
Powered by <%= link_to Redmine::Info.app_name, Redmine::Info.url %> © 2006-2014 Jean-Philippe Lang
|
||||
</div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<%= call_hook :view_layouts_base_body_bottom %>
|
||||
|
||||
<script>
|
||||
var lidCleanUi = function() {
|
||||
var menu = document.getElementById('main-menu');
|
||||
|
||||
if (!menu) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (window.pageYOffset > 100) {
|
||||
menu.setAttribute('class', 'fixed');
|
||||
document.querySelector('#main').setAttribute('class', 'fixed');
|
||||
document.querySelector('#header').setAttribute('class', 'fixed');
|
||||
} else {
|
||||
menu.setAttribute('class', '');
|
||||
document.querySelector('#main').setAttribute('class', '');
|
||||
document.querySelector('#header').setAttribute('class', '');
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener('resize', lidCleanUi, false);
|
||||
window.addEventListener('load', lidCleanUi, false);
|
||||
window.addEventListener('scroll', lidCleanUi, false);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -30,7 +30,7 @@ input, select, textarea {
|
|||
}
|
||||
|
||||
a, a:link, a:visited {
|
||||
color: #1564b2
|
||||
color: #1a2126
|
||||
}
|
||||
|
||||
#main {
|
||||
|
|
@ -65,7 +65,7 @@ div#content {
|
|||
}
|
||||
|
||||
#footer a:hover {
|
||||
color: #1564b2;
|
||||
color: #1a2126;
|
||||
text-decoration: none
|
||||
}
|
||||
|
||||
|
|
@ -129,7 +129,7 @@ h2 {
|
|||
|
||||
|
||||
#top-menu a:hover {
|
||||
color: #1564b2;
|
||||
color: #fff;
|
||||
text-decoration: none
|
||||
}
|
||||
|
||||
|
|
@ -137,7 +137,7 @@ h2 {
|
|||
left: 0;
|
||||
width: 100%;
|
||||
height: 51px;
|
||||
background-color: #1564b2;
|
||||
background-color: #1a2126;
|
||||
font-weight: 500;
|
||||
overflow: hidden
|
||||
}
|
||||
|
|
@ -297,7 +297,7 @@ body #context-menu li a {
|
|||
|
||||
body #context-menu li:hover {
|
||||
background: #f2f4f5;
|
||||
color: #1564b2;
|
||||
color: #1a2126;
|
||||
border: 1px solid #f2f4f5;
|
||||
border-radius: 0
|
||||
}
|
||||
|
|
@ -492,7 +492,7 @@ div.modal {
|
|||
}
|
||||
|
||||
#ajax-modal p.buttons input[type=submit], .ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-close, input[type=submit] {
|
||||
background: #1564b2;
|
||||
background: #1a2126;
|
||||
border-color: transparent;
|
||||
color: #fff
|
||||
}
|
||||
|
|
@ -535,7 +535,7 @@ fieldset#filters td.values input, input[type=password], input[type=text] {
|
|||
}
|
||||
|
||||
fieldset#filters td.values input:focus, input[type=password]:focus, input[type=text]:focus, select:focus, textarea:focus {
|
||||
border-color: #1564b2;
|
||||
border-color: #1a2126;
|
||||
outline: 0
|
||||
}
|
||||
|
||||
|
|
@ -1169,7 +1169,7 @@ BODY {
|
|||
}
|
||||
|
||||
#top-menu .mobile_search input[type=submit] {
|
||||
background: url(../images/svg/search.svg) #1564b2;
|
||||
background: url(../images/svg/search.svg) #1a2126;
|
||||
background-size: cover
|
||||
}
|
||||
|
||||
|
|
@ -1347,3 +1347,177 @@ BODY {
|
|||
}
|
||||
|
||||
#login-form table {margin-top:5em; padding:1em; margin-left: auto; margin-right: auto; border: 2px solid #e8f3ff; background-color:#e8f3ff; }
|
||||
|
||||
/* Nouveau */
|
||||
.list .status-1 .status {background: #efefef !important; color: #000 !important; font-weight: bold;}
|
||||
/* Pris en compte */
|
||||
.list .status-7 .status {background: #ead151 !important; color: #5a501f !important}
|
||||
/* Commentaire */
|
||||
.list .status-4 .status {background: #FFB964 !important;}
|
||||
/* En cours */
|
||||
.list .status-2 .status {background: #C9FF9C !important; color: #334127 !important}
|
||||
/* À tester */
|
||||
.list .status-8 .status {background: #E69FFF;}
|
||||
/* À déployer */
|
||||
.list .status-9 .status {background: #6F91FF;}
|
||||
.list .status-12 .status {background: #c1e2ff !important; color: #364048 !important;}
|
||||
/* Résolu */
|
||||
.list .status-3 .status {background: #4BCA21 !important; color: #161e26 !important}
|
||||
/* Fermé */
|
||||
.list .status-5 .status {background: #CACACA;}
|
||||
/* Rejeté */
|
||||
.list .status-6 .status {background: #A2A2A2;}
|
||||
/* A valider */
|
||||
.list .status-11 .status {background: #A6DB74 !important; color: #1a2312 !important}
|
||||
|
||||
.list .context-menu-selection td {background: #efefef; color #333;}
|
||||
|
||||
/* Evolution */
|
||||
.list .tracker-2 .tracker {background: #c2d8ff !important; color: #363c47 !important;}
|
||||
/* Bug */
|
||||
.list .tracker-1 .tracker {background: #e5a1d0 !important; color: #352530 !important;}
|
||||
/* Prod */
|
||||
.list .tracker-3 .tracker {background: #96a0ce !important; color: #fff !important;}
|
||||
|
||||
#header {
|
||||
color: #fff;
|
||||
padding-bottom: 35px;
|
||||
}
|
||||
|
||||
@keyframes headerAnimation {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
10% {
|
||||
opacity: 1;
|
||||
}
|
||||
30% {
|
||||
opacity: 1;
|
||||
}
|
||||
40% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1024px) {
|
||||
#header h1:after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 13px;
|
||||
left: 25px;
|
||||
width: 40px;
|
||||
height: 50px;
|
||||
background: url(../images/logo2.png) no-repeat;
|
||||
opacity: 0;
|
||||
animation-duration: 10s;
|
||||
animation-name: headerAnimation;
|
||||
animation-iteration-count: infinite;
|
||||
animation-direction: alternate;
|
||||
animation-delay: 5s;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 1300px) {
|
||||
/*.list .status-1 .status:after {
|
||||
display: block;
|
||||
content: "";
|
||||
height: 5px;
|
||||
width: 5px;
|
||||
background: black;
|
||||
position: absolute;
|
||||
margin-left: -3px;
|
||||
margin-top: -11px;
|
||||
border-radius: 100%;
|
||||
}*/
|
||||
.list .status-1 .status {
|
||||
}
|
||||
}
|
||||
|
||||
#main.fixed {
|
||||
margin-top: 120px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
#quick-search label, #loggedas {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#quick-search {
|
||||
float: none;
|
||||
}
|
||||
|
||||
#quick-search select, #quick-search input {
|
||||
width: 100%;
|
||||
max-width: 100% !important;
|
||||
margin: 5px 0;
|
||||
padding: 3px 0 3px 3px;
|
||||
float: none;
|
||||
display: block;
|
||||
}
|
||||
|
||||
#all_attributes p label {
|
||||
display: block;
|
||||
width: 80%;
|
||||
padding: 10px 5px;
|
||||
margin: 0;
|
||||
float: none;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
#all_attributes p {
|
||||
margin: 0;
|
||||
padding: 3px 0;
|
||||
}
|
||||
|
||||
#all_attributes p input {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
#main.fixed {
|
||||
margin-top: 116px;
|
||||
}
|
||||
|
||||
#wrapper {
|
||||
background: #f9f9f9;
|
||||
}
|
||||
}
|
||||
|
||||
#main-menu.fixed {
|
||||
position: fixed !important;
|
||||
top: 0 !important;
|
||||
z-index: 1000 !important;
|
||||
height: 50px !important;
|
||||
}
|
||||
|
||||
#main {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#header.fixed {
|
||||
position: fixed;
|
||||
bottom: -1000px;
|
||||
left: 0;
|
||||
width: 0;
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
padding 5px !important;
|
||||
padding-bottom: 0 !important;
|
||||
border-top: 3px solid #ccc;
|
||||
background: #f9f9f9;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
#header.fixed h1 {
|
||||
background: url(../images/logo3.png) 5px 5px no-repeat;
|
||||
color: #333;
|
||||
z-index: 1000;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.id, .list .status-1 td.id a, .list .checkbox {
|
||||
color: #1a2126 !important;
|
||||
background: #fff !important;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue