-
Couldn't load subscription status.
- Fork 186
[login] Homepage header image and Partner Logos Panel #10051
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: main
Are you sure you want to change the base?
Changes from all commits
df9f696
7a67241
4a0cb0e
0cb9d50
5d215d0
6c2aa56
31080fc
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| INSERT INTO ConfigSettings (Name, Description, Visible, AllowMultiple, DataType, Parent, Label, OrderNumber) VALUES('login_logo_left', 'Path for top left logo on the login page.', 1, 0, 'text', 1, 'Login Top Left Logo', 3); | ||
| INSERT INTO ConfigSettings (Name, Description, Visible, AllowMultiple, DataType, Parent, Label, OrderNumber) VALUES('login_logo_right', 'Path for top right logo on the login page.', 1, 0, 'text', 1, 'Login Top Right Logo', 3); | ||
| INSERT INTO ConfigSettings (Name, Description, Visible, AllowMultiple, DataType, Parent, Label, OrderNumber) VALUES('login_logo_left_link', 'Optional link to redirect when clicking on top left logo', 1, 0, 'text', 1, 'Login Top Left Logo Link', 4); | ||
| INSERT INTO ConfigSettings (Name, Description, Visible, AllowMultiple, DataType, Parent, Label, OrderNumber) VALUES('login_logo_right_link', 'Optional link to redirect when clicking on top right logo', 1, 0, 'text', 1, 'Login Top Right Logo Link', 4); | ||
| INSERT INTO ConfigSettings (Name, Description, Visible, AllowMultiple, DataType, Parent, Label, OrderNumber) VALUES('partner_logos', 'Logos for partners to be displayed in the homepage', 1, 1, 'text', 1, 'Partner Logos', 4); | ||
|
|
||
| INSERT INTO Config (ConfigID, Value) VALUES ((SELECT ID FROM ConfigSettings WHERE Name="login_logo_left"), "/images/LORIS_logo_white.svg"); | ||
| INSERT INTO Config (ConfigID, Value) VALUES ((SELECT ID FROM ConfigSettings WHERE Name="login_logo_right"), "/images/GitHub-Mark-Light-64px.png"); | ||
| INSERT INTO Config (ConfigID, Value) VALUES ((SELECT ID FROM ConfigSettings WHERE Name="login_logo_left_link"), "/"); | ||
| INSERT INTO Config (ConfigID, Value) VALUES ((SELECT ID FROM ConfigSettings WHERE Name="login_logo_right_link"), "https://github.com/aces/Loris"); | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -46,54 +46,78 @@ h1, h2, h3, h4 { | |
| .header { | ||
| height: 100px; | ||
| background-color: #064785; | ||
| padding: 5px 0; | ||
| padding: 0; | ||
| position: relative; | ||
| } | ||
|
|
||
| .header-container { | ||
| margin-right: auto; | ||
| margin-left: auto; | ||
| padding-left: 15px; | ||
| padding-right: 15px; | ||
| height: 100%; | ||
| display: flex; | ||
| align-items: center; | ||
| } | ||
|
|
||
| .flex-wrapper { | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: space-between; | ||
| width: 100%; | ||
| height: 100%; | ||
| position: relative; | ||
| padding: 0 20px; | ||
| box-sizing: border-box; | ||
| max-width: 1170px; | ||
| margin: auto; | ||
| } | ||
|
|
||
| .header .loris-logo { | ||
| margin-right: auto; | ||
| .logo-wrapper { | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| max-height: 100%; | ||
| max-width: 120px; | ||
| } | ||
|
|
||
| .header .loris-logo img { | ||
| height: 80px; | ||
| .logo-wrapper img { | ||
| max-height: 120px; | ||
| height:auto; | ||
| width: auto; | ||
| } | ||
|
|
||
| .header .github-logo { | ||
| margin-left: auto; | ||
| . | ||
| .logo-left { | ||
| margin-right: auto; | ||
| } | ||
|
|
||
| .header .github-logo img { | ||
| height: 40px; | ||
| padding-right: 10px; | ||
| opacity: 0.8; | ||
| .logo-right { | ||
|
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. With the sizing changes, the github logo looks blurry now. Could you update it to be a higher quality image, or change to an svg? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I have updated the asset to a svg |
||
| margin-left: auto; | ||
|
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. adjust the mobile display of the asset to be smaller |
||
| } | ||
|
|
||
| .header .github-logo img:hover { | ||
| opacity: 1; | ||
| -webkit-transition: opacity 0.2s ease-in; | ||
| transition: opacity 0.2s ease-in; | ||
| .logo-right img { | ||
| width: 100%; | ||
| height: 100%; | ||
| max-width: 64px; | ||
| max-height: 64px; | ||
| } | ||
|
|
||
| .header .nav-link { | ||
| color: #fff; | ||
| font-size: 22px; | ||
| line-height: 130px; | ||
| .d-none { | ||
| display: none; | ||
| } | ||
|
|
||
| .header .study-title { | ||
| width: 500px; | ||
| .study-title { | ||
| flex: 1; | ||
| padding: 0 20px; | ||
| color: #eee; | ||
| font-size: 25px; | ||
| line-height: 1.15; | ||
| font-weight: 600; | ||
| font-variant: small-caps; | ||
| text-align: center; | ||
| white-space: nowrap; | ||
| overflow: hidden; | ||
| text-overflow: ellipsis; | ||
| padding: 0 10px; | ||
| } | ||
|
|
||
| .main-content { | ||
|
|
@@ -162,6 +186,26 @@ h1, h2, h3, h4 { | |
| padding: 0 20px 40px 20px; | ||
| } | ||
|
|
||
| @media (max-width: 768px) { | ||
| .flex-wrapper { | ||
| padding-left: 0; | ||
| padding-right: 0; | ||
| } | ||
|
|
||
| .logo-left img { | ||
| width: 100%; | ||
| } | ||
|
|
||
| .logo-right a { | ||
| display: flex; | ||
| justify-content: end; | ||
| } | ||
|
|
||
| .logo-right img { | ||
| max-width: 80%; | ||
| } | ||
| } | ||
|
|
||
| /* Tablets and bigger */ | ||
| @media (min-width: 768px) { | ||
| .header { | ||
|
|
||

Uh oh!
There was an error while loading. Please reload this page.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Would it be possible to make the images work in an overridden project setting? I tried to change the logo to one in my project folder but it doesn't seem to work
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
its possible, that's what we do on CBIG. you would need to put the logo in the
staticdirectory of a project module. I have a project module specific to anything that can be reached by an anonymous user and another module for things that require login but basically the logos sit in the publicly accessible one.Uh oh!
There was an error while loading. Please reload this page.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Ways to achieve this:
or
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I dont think we need to go that far, the project module way works fine
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Sorry, so the image would be at
/project/static/images/ctu.pngAnd then I can reference it with what from config?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@skarya22 What he means is that every module's
static/directory has the correct settings already. To override, you can place and reference an image in, for example:project/modules/login/static/ctu.png.