Commit 190a3945 authored by Wolfgang Wiese's avatar Wolfgang Wiese
Browse files

desktop backend 1 beta

parent c12fc525
# --
# Copyright (C) 2001-2020 OTRS AG, https://otrs.com/
# Modified Navbar OTRS
# RRZE Webteam 2020
# --
# This software comes with ABSOLUTELY NO WARRANTY. For details, see
# the enclosed file COPYING for license information (GPL). If you
# did not receive this file, see https://www.gnu.org/licenses/gpl-3.0.txt.
# --
<div id="NavigationContainer">
<ul id="Navigation" class="Draggable ARIARoleNavigation" style="visibility: hidden;">
[% RenderBlockStart("ItemArea") %]
<li id="nav-[% Data.NameForID | html %]" class="[% Data.CSS | html %]">
<a href="[% Env("Baselink") %][% Data.Link %]" title="[% Translate(Data.Name) | html %][% Data.AccessKeyReference | html %]" accesskey="[% Data.AccessKey | html %]" [% Data.LinkOption %]>[% Translate(Data.Name) | html %]</a>
[% RenderBlockStart("ItemAreaSub") %]
<ul id="nav-[% Data.NameForID | html %]-container">
[% RenderBlockStart("ItemAreaSubItem") %]
<li id="nav-[% Data.NameTop | html %]-[% Data.NameForID | html %]">
<a href="[% Env("Baselink") %][% Data.Link %]" title="[% Translate(Data.Description) | html %][% Data.AccessKeyReference | html %]" accesskey="[% Data.AccessKey | html %]" [% Data.LinkOption %]>[% Translate(Data.Name) | html %]</a>
</li>
[% RenderBlockEnd("ItemAreaSubItem") %]
</ul>
[% RenderBlockEnd("ItemAreaSub") %]
</li>
[% RenderBlockEnd("ItemArea") %]
[% RenderBlockStart("SearchIcon") %]
<li id="nav-search">
<a class="Search ScreenXL ARIARoleSearch ARIAHasPopup" id="GlobalSearchNav" href="[% Env("Baselink") %]Action=AgentTicketSearch" title="[% Translate("Search") | html %]">
<i class="fa fa-search"></i>
</a>
<a class="Search SmallerOrEqualScreenL ARIARoleSearch ARIAHasPopup" id="GlobalSearchNavResponsive" href="[% Env("Baselink") %]Action=AgentTicketSearch" title="[% Translate("Search") | html %]">
[% Translate("Search") | html %]
</a>
</li>
[% RenderBlockEnd("SearchIcon") %]
</ul>
</div>
<nav id="2NavigationContainer">
<ul id="Navigation" class="Draggable ARIARoleNavigation" style="visibility: hidden;">
[% RenderBlockStart("ItemArea") %]
<li id="nav-[% Data.NameForID | html %]" class="[% Data.CSS | html %]">
<a href="[% Env("Baselink") %][% Data.Link %]" title="[% Translate(Data.Name) | html %][% Data.AccessKeyReference | html %]" accesskey="[% Data.AccessKey | html %]" [% Data.LinkOption %]>[% Translate(Data.Name) | html %]</a>
[% RenderBlockStart("ItemAreaSub") %]
<ul id="nav-[% Data.NameForID | html %]-container">
[% RenderBlockStart("ItemAreaSubItem") %]
<li id="nav-[% Data.NameTop | html %]-[% Data.NameForID | html %]">
<a href="[% Env("Baselink") %][% Data.Link %]" title="[% Translate(Data.Description) | html %][% Data.AccessKeyReference | html %]" accesskey="[% Data.AccessKey | html %]" [% Data.LinkOption %]>[% Translate(Data.Name) | html %]</a>
</li>
[% RenderBlockEnd("ItemAreaSubItem") %]
</ul>
[% RenderBlockEnd("ItemAreaSub") %]
</li>
[% RenderBlockEnd("ItemArea") %]
[% RenderBlockStart("SearchIcon") %]
<li id="nav-search">
<a class="Search ScreenXL ARIARoleSearch ARIAHasPopup" id="GlobalSearchNav" href="[% Env("Baselink") %]Action=AgentTicketSearch" title="[% Translate("Search") | html %]">
<i class="fa fa-search"></i>
</a>
<a class="Search SmallerOrEqualScreenL ARIARoleSearch ARIAHasPopup" id="GlobalSearchNavResponsive" href="[% Env("Baselink") %]Action=AgentTicketSearch" title="[% Translate("Search") | html %]">
[% Translate("Search") | html %]
</a>
</li>
[% RenderBlockEnd("SearchIcon") %]
</ul>
</nav>
</div> <!-- / #Headerbar -->
</header>
\ No newline at end of file
</div> <!-- / .header-menu -->
</header>
<main>
\ No newline at end of file
# --
# Copyright (C) 2001-2020 OTRS AG, https://otrs.com/
# Modified Footer OTRS
# RRZE Webteam 2020
# --
# This software comes with ABSOLUTELY NO WARRANTY. For details, see
# the enclosed file COPYING for license information (GPL). If you
# did not receive this file, see https://www.gnu.org/licenses/gpl-3.0.txt.
# --
</main>
<footer>
<div class="content-footer">
<div class="logo">
<a href="https://www.fau.de"><img src="[% Config("Frontend::WebPath") %]skins/Customer/fau/img/fau-logo-fff.png" alt="Friedrich-Alexander-Universität Erlangen-Nürnberg"></a>
</div>
<div class="meta">
<nav aria-labelledby="footer-nav-title">
<h2 class="screen-reader-text" id="footer-nav-title">Kontakt, Impressum und Zusatzinformationen</h2>
<ul>
<li><a href="/kontakt">Kontakt</a></li>
<li><a target="_blank" href="https://community.otrs.com/" rel="noopener noreferrer">OTRS</a></li>
<li><a href="/impressum">Impressum</a></li>
<li><a href="/datenschutz">Datenschutz</a></li>
<li><a href="/barrierefreiheit">Barrierefreiheit</a></li>
</ul>
</nav>
</div>
</div>
</footer>
<div class="content-footer">
<div class="logo">
<a href="https://www.fau.de"><img src="[% Config("Frontend::WebPath") %]skins/Customer/fau/img/fau-logo-fff.png" alt="Friedrich-Alexander-Universität Erlangen-Nürnberg"></a>
</div>
<div class="meta">
<nav aria-labelledby="footer-nav-title">
<h2 class="screen-reader-text" id="footer-nav-title">Kontakt, Impressum und Zusatzinformationen</h2>
<ul>
<li><a href="/kontakt">Kontakt</a></li>
<li><a target="_blank" href="https://community.otrs.com/" rel="noopener noreferrer">OTRS</a></li>
<li><a href="/impressum">Impressum</a></li>
<li><a href="/datenschutz">Datenschutz</a></li>
<li><a href="/barrierefreiheit">Barrierefreiheit</a></li>
</ul>
</nav>
</div>
</div>
</footer>
[% InsertTemplate("FooterJS.tt") %]
......
# --
# Copyright (C) 2001-2020 OTRS AG, https://otrs.com/
# --
# This software comes with ABSOLUTELY NO WARRANTY. For details, see
# the enclosed file COPYING for license information (GPL). If you
# did not receive this file, see https://www.gnu.org/licenses/gpl-3.0.txt.
# Modified HTMLHead OTRS
# RRZE Webteam 2020
# --
## nofilter(TidyAll::Plugin::OTRS::TT::ScriptUsage)
<head>
......
# --
# Copyright (C) 2001-2020 OTRS AG, https://otrs.com/
# --
# This software comes with ABSOLUTELY NO WARRANTY. For details, see
# the enclosed file COPYING for license information (GPL). If you
# did not receive this file, see https://www.gnu.org/licenses/gpl-3.0.txt.
# Modified Header OTRS
# RRZE Webteam 2020
# --
[%- INCLUDE "HTTPHeaders.tt" -%]
......@@ -15,50 +12,51 @@
<a name="Top"></a>
<div id="AppWrapper">
<header>
<div class="meta-header">
<nav class="meta-links" aria-labelledby="meta-links-title">
<h2 id="meta-links-title" class="screen-reader-text">Meta-Navigation</h2>
<ul class="orgalist">
<li class="fauhome"><a href="https://www.fau.de"><img src="[% Config("Frontend::WebPath") %]skins/Customer/fau/img/fau-logo-37x16.png" alt="Friedrich-Alexander-Universität Erlangen-Nürnberg (FAU)"></a></li>
<li><a href="https://www.rrze.fau.de"><img src="[% Config("Frontend::WebPath") %]skins/Customer/fau/img/rrze-logo-37x16.png" alt="Regionales Rechenzentrum Erlangen (RRZE)"></a></li>
</ul>
</nav>
<div class="login-info">
<div class="meta-row">
<div class="meta-header">
<nav class="meta-links" aria-labelledby="meta-links-title">
<h2 id="meta-links-title" class="screen-reader-text">Meta-Navigation</h2>
<ul class="orgalist">
<li class="fauhome"><a href="https://www.fau.de"><img src="[% Config("Frontend::WebPath") %]skins/Customer/fau/img/fau-logo-37x16.png" alt="Friedrich-Alexander-Universität Erlangen-Nürnberg (FAU)"></a></li>
<li><a href="https://www.rrze.fau.de"><img src="[% Config("Frontend::WebPath") %]skins/Customer/fau/img/rrze-logo-37x16.png" alt="Regionales Rechenzentrum Erlangen (RRZE)"></a></li>
</ul>
</nav>
<div class="login-info">
<ul class="itemcounter">
[% RenderBlockStart("ToolBarItem") %]
<li class="[% Data.Class | html %]"><a href="[% Data.Link %]" target="[% Data.Target | html %]" accesskey="[% Data.AccessKey | html %]" title="[% Translate(Data.Description) | html %]: [% Data.Count | html %][% Data.AccessKeyReference | html %]"><span class="screen-reader-text">[% Translate(Data.Description) | html %]</span> <i class="icon-small fa fa-clock-o icon-show-reached"></i> <i class="icon-small fa fa-star icon-show-new"></i><i class="[% Data.Icon | html %]"></i> <span class="Counter">[% Data.Count | html %]</span> </a></li>
[% RenderBlockEnd("ToolBarItem") %]
</ul>
<ul class="itemcounter">
[% RenderBlockStart("ToolBarItem") %]
<li class="[% Data.Class | html %]"><a href="[% Data.Link %]" target="[% Data.Target | html %]" accesskey="[% Data.AccessKey | html %]" title="[% Translate(Data.Description) | html %]: [% Data.Count | html %][% Data.AccessKeyReference | html %]"><span class="screen-reader-text">[% Translate(Data.Description) | html %]</span> <i class="icon-small fa fa-clock-o icon-show-reached"></i> <i class="icon-small fa fa-star icon-show-new"></i><i class="[% Data.Icon | html %]"></i> <span class="Counter">[% Data.Count | html %]</span> </a></li>
[% RenderBlockEnd("ToolBarItem") %]
</ul>
<span class="logininfo">
[% IF Data.Avatar %]
<img class="avatar" src="[% Data.Avatar %]" />
[% ELSE %]
<span class="notice-login-as">Angemeldet als</span>
[% END %]
<strong>[% Env("UserFullname") | html %]</strong></span>
<span class="logininfo">
[% IF Data.Avatar %]
<img class="avatar" src="[% Data.Avatar %]" />
[% ELSE %]
<span class="notice-login-as">Angemeldet als</span>
[% END %]
<strong>[% Env("UserFullname") | html %]</strong></span>
[% RenderBlockStart("Login") %]
<a class="preferences" href="[% Env("Baselink") %]Action=AgentPreferences" title="[% Translate("Edit personal preferences") | html %]">
<i class="fa fa-cog"></i><span>[% Translate("Personal preferences") | html %]</span>
</a>
[% RenderBlockEnd("Login") %]
[% RenderBlockStart("Logout") %]
<a class="logout" id="LogoutButton" href="[% Env("Baselink") %]Action=Logout;[% Env("ChallengeTokenParam") | html %]" title="[% Translate("Logout") | html %] ([% Translate("You are logged in as") | html %] [% Env("UserFullname") | html %])">
<i class="fa fa-power-off"></i><span>[% Translate("Logout") | html %]</span>
</a>
[% RenderBlockEnd("Logout") %]
[% RenderBlockStart("Login") %]
<a class="preferences" href="[% Env("Baselink") %]Action=AgentPreferences" title="[% Translate("Edit personal preferences") | html %]">
<i class="fa fa-cog"></i><span>[% Translate("Personal preferences") | html %]</span>
</a>
[% RenderBlockEnd("Login") %]
[% RenderBlockStart("Logout") %]
<a class="logout" id="LogoutButton" href="[% Env("Baselink") %]Action=Logout;[% Env("ChallengeTokenParam") | html %]" title="[% Translate("Logout") | html %] ([% Translate("You are logged in as") | html %] [% Env("UserFullname") | html %])">
<i class="fa fa-power-off"></i><span>[% Translate("Logout") | html %]</span>
</a>
[% RenderBlockEnd("Logout") %]
</div>
</div>
</div>
<div id="Header" class="ARIARoleBanner">
<p class="logo">
<img src="[% Config("Frontend::WebPath") %]skins/Customer/fau/img/otrs-logo.png" class="otrs-logo" alt="RRZE OTRS">
</p>
<div id="Header" class="header-menu">
<div class="logo" role="banner">
<a href="/otrs/index.pl?Action=AgentDashboard"><img src="[% Config("Frontend::WebPath") %]skins/Customer/fau/img/otrs-logo.png" class="otrs-logo" alt="RRZE OTRS"></a>
</div>
......
# --
# Copyright (C) 2001-2020 OTRS AG, https://otrs.com/
# --
# This software comes with ABSOLUTELY NO WARRANTY. For details, see
# the enclosed file COPYING for license information (GPL). If you
# did not receive this file, see https://www.gnu.org/licenses/gpl-3.0.txt.
# Modified Login OTRS
# RRZE Webteam 2020
# --
## nofilter(TidyAll::Plugin::OTRS::TT::ScriptUsage)
[%- INCLUDE "HTTPHeaders.tt" -%]
......
This diff is collapsed.
{
"name": "rrze-otrs-customizing",
"version": "1.0.7-22",
"version": "1.0.7-41",
"description": "RRZE OTRS UI Customizing",
"main": "start.html",
"scripts": {
......
......@@ -17,7 +17,10 @@ html, body {
--fontfamily: 'Roboto', 'Open Sans', 'Lato', sans-serif;
--meta-bg-color: #e9edf2;
--main-bg-color: #fff;
--meta-link-color: #036; }
--meta-link-color: #036;
--mainmenu-fontsize: 16px;
--mainmenu-color: #036;
--mainmenu-lineheight: 1.46rem; }
.container {
display: flex;
......@@ -39,7 +42,8 @@ html, body {
height: -webkit-max-content;
height: -moz-max-content;
height: max-content;
margin: auto; }
margin: auto;
max-width: 1400px; }
.container main.login .content {
margin: 0;
width: 100%;
......@@ -49,14 +53,13 @@ html, body {
width: 450px;
margin: 0 0 0 auto;
min-width: var(--screen-xs); } }
@media (min-width: 1200px) {
@media (min-width: 1400px) {
.container main.login .content {
margin: auto;
align-self: flex-start; } }
.container footer {
margin-top: auto;
width: 100%; }
.container .meta-header,
.container header {
margin: 0;
width: 100%;
......@@ -65,7 +68,7 @@ html, body {
margin-left: 25px;
margin-right: 25px; }
.container .meta-header, .container .content, .container .content-footer {
max-width: 1200px;
max-width: 1400px;
margin: 0 auto; }
.meta-header {
......@@ -79,6 +82,9 @@ html, body {
padding: 8px;
color: var(--meta-link-color);
text-decoration: none; }
@media (min-width: 600px) {
.meta-header li.fauhome a {
padding-left: 0; } }
.meta-header .meta-links,
.meta-header .login-info {
padding: 0; }
......@@ -103,9 +109,9 @@ html, body {
.content-footer .logo {
order: 1;
margin: 10px; }
@media (min-width: 480px) {
@media (min-width: 600px) {
.content-footer .logo {
margin: 20px; } }
margin: 20px 0; } }
.content-footer .logo img {
width: 120px; }
@media (min-width: 480px) {
......@@ -508,57 +514,110 @@ ul {
/*
Agent view
*/
.agent .logo {
text-align: right; }
.agent .logo .otrs-logo {
max-height: 60px;
margin-right: 20px; }
.agent #Header {
background: var(--main-bg-color);
color: #003366; }
.agent #Header li a {
color: #003366; }
.agent .meta-header {
.agent .meta-row {
background: var(--meta-bg-color); }
.agent .meta-header .login-info img.avatar {
border-radius: 50%;
width: 20px;
height: 20px;
vertical-align: middle;
margin: 0 5px; }
.agent .meta-header a span {
margin-left: 5px; }
.agent .meta-header a.logout {
background-color: #b00f0f;
color: white;
margin-left: 20px; }
.agent .meta-header ul.itemcounter {
.agent .meta-header .login-info img.avatar {
border-radius: 50%;
width: 20px;
height: 20px;
vertical-align: middle;
margin: 0 5px; }
.agent .meta-header a span {
margin-left: 5px; }
.agent .meta-header a.logout {
background-color: #b00f0f;
color: white;
margin-left: 20px; }
.agent .meta-header ul.itemcounter {
display: inline-block; }
.agent .meta-header ul.itemcounter i.icon-small {
font-size: 12px;
position: absolute;
right: -7px;
text-align: center;
top: -3px;
width: 15px;
display: none; }
.agent .meta-header ul.itemcounter li.Locked i.icon-show-locked {
display: inline-block; }
.agent .meta-header ul.itemcounter li.New i.icon-show-new {
display: inline-block; }
.agent .meta-header ul.itemcounter li.Reached i.icon-show-reached {
display: inline-block; }
.agent .meta-header ul.itemcounter i.icon-small {
.agent .meta-header ul.itemcounter li a {
padding-right: 0; }
.agent .meta-header ul.itemcounter li a span.Counter {
display: inline-block;
font-size: 12px;
position: absolute;
right: -7px;
text-align: center;
top: -3px;
width: 15px;
display: none; }
.agent .meta-header ul.itemcounter li.Locked i.icon-show-locked {
display: inline-block; }
.agent .meta-header ul.itemcounter li.New i.icon-show-new {
display: inline-block; }
.agent .meta-header ul.itemcounter li.Reached i.icon-show-reached {
display: inline-block; }
.agent .meta-header ul.itemcounter li a {
padding-right: 0; }
.agent .meta-header ul.itemcounter li a span.Counter {
display: inline-block;
font-size: 12px;
line-height: 12px;
position: relative;
top: 10px;
left: -10px; }
.agent #NavigationContainer {
position: relative; }
line-height: 12px;
position: relative;
top: 10px;
left: -10px; }
.agent #Header,
.agent .header-menu {
display: flex;
flex-wrap: nowrap;
flex-direction: row;
justify-content: flex-start;
align-items: baseline;
padding: 0;
height: inherit;
margin: 20px auto 10px auto; }
.agent #Header .logo,
.agent .header-menu .logo {
order: 1;
min-width: 240px; }
.agent #Header .logo .otrs-logo,
.agent .header-menu .logo .otrs-logo {
margin-left: 10px;
max-height: 60px;
margin-right: 20px; }
.agent #Header nav,
.agent #Header #NavigationContainer,
.agent .header-menu nav,
.agent .header-menu #NavigationContainer {
order: 2;
position: relative;
top: inherit;
width: inherit;
left: inherit !important; }
.agent #Header nav ul#Navigation li a,
.agent #Header #NavigationContainer ul#Navigation li a,
.agent .header-menu nav ul#Navigation li a,
.agent .header-menu #NavigationContainer ul#Navigation li a {
color: var(--mainmenu-color);
font-size: var(--mainmenu-fontsize);
line-height: var(--mainmenu-lineheight);
font-weight: bold;
height: inherit; }
.agent #Header nav ul#Navigation li ul li a,
.agent #Header #NavigationContainer ul#Navigation li ul li a,
.agent .header-menu nav ul#Navigation li ul li a,
.agent .header-menu #NavigationContainer ul#Navigation li ul li a {
color: #fff;
font-weight: normal; }
.agent header .meta-header, .agent header .content-footer, .agent header .header-menu, .agent footer .meta-header, .agent footer .content-footer, .agent footer .header-menu {
width: 100%; }
@media (min-width: 1400px) {
.agent header .meta-header, .agent header .content-footer, .agent header .header-menu, .agent footer .meta-header, .agent footer .content-footer, .agent footer .header-menu {
margin: 0 auto;
width: 1400px; } }
.agent main {
width: 100%; }
@media (min-width: 1400px) {
.agent main {
margin: 0 auto;
width: 1400px; } }
......@@ -3,13 +3,7 @@
*/
.agent {
.logo {
text-align: right;
.otrs-logo {
max-height: 60px;
margin-right: 20px;
}
}
#Header {
background: var(--main-bg-color);
......@@ -19,9 +13,10 @@
color: $colorDefault;
}
}
.meta-header {
.meta-row {
background: var(--meta-bg-color);
}
.meta-header {
.login-info {
img.avatar {
border-radius: 50%;
......@@ -90,12 +85,88 @@
}
}
}
}
#NavigationContainer {
position: relative;
#Header,
.header-menu {
display: flex;
flex-wrap: nowrap;
flex-direction: row;
justify-content: flex-start;
align-items: baseline;
padding: 0;
height: inherit;
margin: 20px auto 10px auto;
.logo {
order: 1;
min-width: 240px;
.otrs-logo {
margin-left: 10px;
max-height: 60px;
margin-right: 20px;
}
}
nav,
#NavigationContainer {
order: 2;
position: relative;
top: inherit;
width: inherit;
left: inherit !important;
ul#Navigation {
li {
a {
color: var(--mainmenu-color);
font-size: var(--mainmenu-fontsize);
line-height: var(--mainmenu-lineheight);
font-weight: bold;
height: inherit;
}
ul {
li {
a {
color: #fff;
font-weight: normal;
}
}
}
}
}
}
}
header, footer {
.meta-header, .content-footer, .header-menu {
width: 100%;
@media (min-width: $default-gridwith) {
margin: 0 auto;
width: $default-gridwith;
}
}
}
main {
width: 100%;
@media (min-width: $default-gridwith) {
margin: 0 auto;
width: $default-gridwith;
}
}
}
\ No newline at end of file
......@@ -25,6 +25,7 @@
width: 100%;
height: max-content;
margin: auto;
max-width: $default-gridwith;
}