gCubeSystem
/
d4science-keycloak-themes
17
1
Fork 0
Code Issues Pull Requests Releases 1 Wiki Activity

Refactoring of d4science theme

This commit is contained in:
vcestone 2020-06-25 19:41:27 +02:00
parent ab94ef72a2
commit 6bde1b3532
6 changed files with 157 additions and 110 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/themes/bluecloud/login/theme.properties
View File

@ -1,25 +1,32 @@
parent=d4science
#styles=
titleTag=Blue-Cloud Login
favicon=https://blue-cloud.d4science.org/generic-configurable-theme/images/favicon.ico
linkWebsite=https://www.blue-cloud.org/
descWebsite=Blue-Cloud Project Website
logoSrc=https://blue-cloud.d4science.org/image/layout_set_logo?img_id=199274286&t=1591610863691
logoAlt=Blue-Cloud Gateway
#logoStyle=max-height: 50px;
navbarStyle=color: #FFF; background: #225f97;
infrastructureLogo=yes
footerStyle=background-color: #2f4b6b;
#bodyStyle=
navbarStyle=color: #FFF; background: #225f97;
navbarActive=background-color: #019ad3;
#contentStyle=
footerStyle=color: #fff; background-color: #2f4b6b; font-size: 0.7em;
linkTerms=https://blue-cloud.d4science.org/terms-of-use
linkCookies=https://blue-cloud.d4science.org/cookie-policy
#linkPrivacy=https://www.iubenda.com/privacy-policy/441050
linkProject=https://www.blue-cloud.org/
descrProject=Blue-Cloud Project Website
logoEC=https://blue-cloud.d4science.org/generic-configurable-theme/images/custom/logo-ec.jpg
#logoECStyle=max-width: 35px;
ECLogoSrc=https://blue-cloud.d4science.org/generic-configurable-theme/images/custom/logo-ec.jpg
#ECLogoStyle=max-width: 35px;
ECLogoAlt=EU H2020 programme
footerRow1=Blue-Cloud has received funding from the European Union's Horizon programme call BG-07-2019-2020, topic: [A] 2019 - Blue Cloud services, Grant Agreement n.862409
#footerRow2=...

54
src/themes/d4science/login/resources/css/d4science.css Normal file
View File

@ -0,0 +1,54 @@
html {
height: 100%;
}
body {
display: flex;
flex-direction: column;
height: 100vh;
}
header {
color: #444;
background: url("https://www.d4science.org/biznizz-theme/css/../images/custom/content-bg.png") no-repeat;
background-position: top -70px right -180px;
}
header a {
color: #444;
}
header a:hover {
color: #777;
text-decoration: none;
}
header .navbar {
padding: 0 1rem;
line-height: 2.5rem;
}
header .navbar li.active {
padding: 0 1em;
}
#content {
flex: 1 0 auto;
}
#kc-form-options {
padding-bottom: 1em;
}
.alert-error {
border-color: #dd0000;
color: #773333;
}
.login-pf-social-link {
padding: 0.5em 4.5em;
}
a.zocial {
display: block;
font-size: 1.1em;
}
.zocial.google {
background-color: #dd4b39;
}
.footer {
flex-shrink: 0;
}
.footer a {
color: #fff;
}

124
src/themes/d4science/login/template.ftl
View File

@ -9,73 +9,43 @@
<title>${properties.titleTag}</title>
<link rel="icon" href="${properties.favicon}" />
<#if properties.styles?has_content>
<#list properties.styles?split(' ') as style>
<link href="${url.resourcesPath}/${style}" rel="stylesheet" />
</#list>
</#if>
<style>
html {
position: relative;
min-height: 100%;
}
body {
margin-bottom: 60px; /* Margin bottom by footer height */
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* height: 60px; Set the fixed height of the footer here */
line-height: 60px; /* Vertically center the text there */
color: #fff;
font-size: 0.7em;
background-color: #f5f5f5;
}
.footer a {
color: #fff;
}
.login-pf-social-link {
padding: 0.5em 4.5em;
}
a.zocial {
display: block;
color: white;
font-weight: bold;
text-align: center;
text-decoration: none;
padding: 0.5em;
box-shadow: 2px 2px 2px darkgrey;
}
a.google {
background-color: rgb(209, 72, 54);
}
a.linkedin {
background-color: rgb(38, 114, 176);
}
a.facebook {
background-color: #3c66c4;
}
</style>
</head>
<body>
<body style="${properties.bodyStyle!}">
<header>
<div class="container-fluid">
<div class="row py-3">
<div class="col">
<a href="${properties.linkWebsite}">
<img class="img-fluid float-left" alt="${properties.logoAlt}" src="${properties.logoSrc}" style="${properties.logoStyle}">
<a href="${client.getBaseUrl()}">
<#if properties.logoSrc?has_content>
<img class="img-fluid float-left" alt="${properties.logoAlt}" src="${properties.logoSrc}" style="${properties.logoStyle}">
<#else>
<h1>${client.getName()?capitalize?keep_before('.')}</h1>
</#if>
</a>
</div>
<#if properties.logoInfrastructure?has_content && properties.logoInfrastructure='yes'>
<div class="col">
<a target="_blank" href="http://www.d4science.org">
<img class="img-fluid float-right" alt="D4Science Infrastructure" src="https://sobigdata.d4science.org/sobigdata-site-theme/images/custom/PoweredByD4Science.png">
</a>
</div>
<#if properties.infrastructureLogo?has_content && properties.infrastructureLogo='yes'>
<div class="col">
<a target="_blank" href="http://www.d4science.org">
<img class="img-fluid float-right" alt="D4Science Infrastructure" src="https://sobigdata.d4science.org/sobigdata-site-theme/images/custom/PoweredByD4Science.png">
</a>
</div>
</#if>
</div>
</div>
<nav class="navbar navbar-expand-lg navbar-light" style="${properties.navbarStyle}">
<div>
<#if properties.navbarActive?has_content>
<style>li.active { ${properties.navbarActive} }</style>
</#if>
<ul class="navbar-nav">
<li class="nav-item active">${msg("doLogIn")}</li>
</ul>
@ -88,30 +58,30 @@
<div id="kc-header-wrapper" class="${properties.kcHeaderWrapperClass!}">${kcSanitize(msg("loginTitleHtml",(realm.displayNameHtml!'')))?no_esc}</div>
</div>
-->
<div class="container-fluid">
<div id="content" style="${properties.contentStyle!}">
<div class="container">
<div class="row pt-3 pb-2">
<div class="col px-5">
<div class="col">
<h3><#nested "header"></h3>
</div>
</div>
<#-- App-initiated actions should not see warning messages about the need to complete the action -->
<#-- during login. -->
<#if displayMessage && message?has_content && (message.type != 'warning' || !isAppInitiatedAction??)>
<div class="alert alert-${message.type}">
<#if message.type = 'success'><span class="${properties.kcFeedbackSuccessIcon!}"></span></#if>
<#if message.type = 'warning'><span class="${properties.kcFeedbackWarningIcon!}"></span></#if>
<#if message.type = 'error'><span class="${properties.kcFeedbackErrorIcon!}"></span></#if>
<#if message.type = 'info'><span class="${properties.kcFeedbackInfoIcon!}"></span></#if>
<span class="kc-feedback-text">${kcSanitize(message.summary)?no_esc}</span>
</div>
<div class="alert alert-${message.type}">
<#if message.type = 'success'><span class="${properties.kcFeedbackSuccessIcon!}"></span></#if>
<#if message.type = 'warning'><span class="${properties.kcFeedbackWarningIcon!}"></span></#if>
<#if message.type = 'error'><span class="${properties.kcFeedbackErrorIcon!}"></span></#if>
<#if message.type = 'info'><span class="${properties.kcFeedbackInfoIcon!}"></span></#if>
<span class="kc-feedback-text">${kcSanitize(message.summary)?no_esc}</span>
</div>
</#if>
<div class="row pb-5">
<div class="col px-5">
<div class="col">
<#nested "form">
<#if displayInfo>
@ -121,29 +91,31 @@
</div>
</div>
</#if>
</div>
</div>
</div>
</div>
<footer class="footer container-fluid" style="${properties.footerStyle}">
<div class="row">
<div class="col-12">
<div class="row pb-3">
<div class="col-12 pt-3">
<a href="${properties.linkTerms}">Terms of Use</a> |
<a href="${properties.linkCookies}">Cookies Policy</a> |
<a href="${properties.linkPrivacy}" target="_blank">Privacy Policy</a> |
<#if properties.linkWebsite?has_content>
<a href="${properties.linkWebsite}" target="_blank">${properties.descWebsite}</a>
</#if>
<#if properties.linkProject?has_content><a href="${properties.linkProject}" target="_blank">${properties.descrProject}</a></#if>
</div>
<div class="col-12">
<div class="col-12 text-right">
<a href="http://ec.europa.eu/programmes/horizon2020/" target="_blank">
<img class="float-right" alt="EU H2020 programme" src="${properties.logoEC}" style="${properties.logoECStyle}">
<#if properties.ECLogoSrc?has_content>
<img class="float-right" alt="${properties.ECLogoAlt}" src="${properties.ECLogoSrc}" style="${properties.ECLogoStyle}">
<#else>
${properties.ECLogoAlt}
</#if>
</a>
</div>
<div class="col-12 text-right">${properties.footerRow1}</div>
<div class="col-12 text-right">${properties.footerRow2}</div>
<#if properties.footerRow1?has_content><div class="col-12 text-right">${properties.footerRow1}</div></#if>
<#if properties.footerRow2?has_content><div class="col-12 text-right">${properties.footerRow2}</div></#if>
</div>
</footer>

22
src/themes/d4science/login/theme.properties
View File

@ -1,30 +1,32 @@
parent=keycloak
import=common/keycloak
style=lib/zocial/zocial.css
styles=lib/zocial/zocial.css css/d4science.css
titleTag=Login
favicon=
linkWebsite=
descWebsite=
logoInfrastructure=yes
logoSrc=
logoAlt=
logoStyle=max-height: 50px;
navbarStyle=
infrastructureLogo=yes
footerStyle=background-color: #f5f5f5;
bodyStyle=
navbarStyle=color: #fff; background-color: #999;
navbarActive=background-color: #aaa;
contentStyle=background: #f8f6f2 url('https://www.d4science.org/biznizz-theme/css/../images/custom/bg-noise.png');
footerStyle=color: #fff; background-color: #999; font-size: 0.7em;
linkTerms=
linkCookies=
linkPrivacy=https://www.iubenda.com/privacy-policy/441050
linkProject=
descrProject=
logoEC=
logoECStyle=max-width: 35px;
ECLogoSrc=
ECLogoStyle=max-width: 35px;
ECLogoAlt=EU H2020 programme
footerRow1=
footerRow2=

23
src/themes/dev4.d4science.org/login/theme.properties
View File

@ -1,27 +1,32 @@
parent=d4science
#styles=
titleTag=gCube Snapshot Gateway - Sign in
favicon=https://dev4.d4science.org/generic-configurable-theme/images/favicon.ico
linkWebsite=https://dev4.d4science.org
descWebsite=Go to D4Science Gateway
logoSrc=https://dev4.d4science.org/image/company_logo?img_id=0&amp;t=1590160581995
logoAlt=gCube Snapshot Gateway
logoStyle=height: 70px;
logoInfrastructure=no
infrastructureLogo=no
#bodyStyle=
navbarStyle=color: #FFF; background: #0271BE;
footerStyle=background-color: #555;
navbarActive=background-color: #019ad3;
#contentStyle=
footerStyle=color: #fff; background-color: #555; font-size: 0.7em;
linkTerms=https://dev4.d4science.org/terms-of-use
linkCookies=https://dev4.d4science.org/cookie-policy
#linkPrivacy=https://www.iubenda.com/privacy-policy/441050
linkProject=https://dev4.d4science.org
descrProject=Go to D4Science Gateway
logoEC=https://dev4.d4science.org/generic-configurable-theme/images/custom/logo-ec.jpg
#logoECStyle=max-width: 35px;
ECLogoSrc=https://dev4.d4science.org/generic-configurable-theme/images/custom/logo-ec.jpg
#ECLogoStyle=max-width: 35px;
ECLogoAlt=EU H2020 programme
#footerRow1=...
#footerRow2=...

23
src/themes/next.d4science.org/login/theme.properties
View File

@ -1,26 +1,33 @@
parent=d4science
#styles=
titleTag=gCubeDev Gateway - Sign in
favicon=https://next.d4science.org/generic-configurable-theme/images/favicon.ico
linkWebsite=https://next.d4science.org/
descWebsite=Go to D4Science Gateway
logoSrc=https://next.d4science.org/image/layout_set_logo?img_id=9133999&amp;t=1592922317362
logoAlt=gCubeDev Gateway
logoStyle=height: 70px;
logoInfrastructure=no
infrastructureLogo=no
#bodyStyle=
navbarStyle=color: #FFF; background: #0271BE;
footerStyle=background-color: #555;
navbarActive=background-color: #019ad3;
#contentStyle=
footerStyle=color: #fff; background-color: #555; font-size: 0.7em;
linkTerms=https://next.d4science.org/terms-of-use
linkCookies=https://next.d4science.org/cookie-policy
#linkPrivacy=https://www.iubenda.com/privacy-policy/441050
linkProject=https://next.d4science.org/
descrProject=Go to D4Science Gateway
logoEC=https://next.d4science.org/generic-configurable-theme/images/custom/logo-ec.jpg
#logoECStyle=max-width: 35px;
ECLogoSrc=https://next.d4science.org/generic-configurable-theme/images/custom/logo-ec.jpg
#ECLogoStyle=max-width: 35px;
ECLogoAlt=EU H2020 programme
#footerRow1=...
#footerRow2=...