Skip to content
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.

Sign up for GitHub

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

Jump to bottom

Login Page: Add quote and link to presentation website #261 #265

Merged
merged 7 commits into from
Sep 17, 2018
Merged

Login Page: Add quote and link to presentation website #261 #265

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
8522c50
Add motivating african quote to login
christianeiselt Sep 13, 2018
7f18c6c
Add quotes as variable text snippets
christianeiselt Sep 14, 2018
bf74dde
Change the african quote to the xhosa one
christianeiselt Sep 14, 2018
7d0ff58
Change quote key reflecting region
christianeiselt Sep 14, 2018
f64954a
Add text and link to presentation
christianeiselt Sep 16, 2018
9c45420
Translate presentation text to EN
christianeiselt Sep 16, 2018
37af8a0
Fix translations, use bulmas css for styling
roschaefer Sep 17, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions locales/de.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
{
"humanConnection": "Human Connection",
"humanConnectionMadeWithHeart": "Mit <span style=\"color: #f00\">♥</span> gemacht",
"humanConnectionPresentationLinkText": "Hier geht's zur Präsentations-Website,",
"humanConnectionPresentationText": "auf der du mehr Informationen, Links und Erklärungen dazu findest, wie auch du Teil der Veränderung werden kannst.",
"component": {
"error": {
"header403": "Zutritt verweigert",
Expand Down Expand Up @@ -629,5 +631,11 @@
"created": "Erstellt",
"active": "Aktiviert",
"inactive": "Deaktiviert"
},
"quotes": {
"african": {
"txt": "Viele kleine Leute, an vielen kleinen Orten, die viele kleine Dinge tun, werden das Antlitz dieser Welt verändern.",
"author": "Afrikanisches Sprichwort"
}
}
}
7 changes: 7 additions & 0 deletions locales/en.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
{
"humanConnection": "Human Connection",
"humanConnectionMadeWithHeart": "Made with <span style=\"color: #f00\">♥</span>",
"humanConnectionPresentationText": "Hier geht's zur Präsentations-Website, auf der du mehr Informationen, Links und Erklärungen findest, wie auch du Teil der Veränderung werden kannst.",
"component": {
"error": {
"header403": "Forbidden",
Expand Down Expand Up @@ -631,5 +632,11 @@
"created": "Created",
"active": "Active",
"inactive": "Inactive"
},
"quotes": {
"african": {
"txt": "Many small people, who in many small places do many small things, that can alter the face of the world.",
"author": "African Saying"
}
}
}
16 changes: 16 additions & 0 deletions pages/auth/login.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,6 +68,22 @@
{{ $t('auth.login.label') }}
</hc-button>
</form>
<p class="subtitle is-6">
{{ $t('quotes.african.txt') }}
<div style="padding-top: 10px">
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is dirty... Can somebody point me to the right css class or where to create a new one for this purpose?
@roschaefer

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sure, just take a look at the other components. You can add a class name on the element and then style it inside the style tag on the component or page.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

image
That is the current status.

Copy link
Author

@christianeiselt christianeiselt Sep 16, 2018 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sure, just take a look at the other components. You can add a class name on the element and then style it inside the style tag on the component or page.

Yeah, that's what I tried. But when I add .subtitle.is-8 as a copy of .subtitle.is-7 plus the additional padding-top: 10px; and change the class in the login.vue to subtitle is-8, it is not recognized and will be displayed with default style...

image

Actually, I just need to know, which stylesheet I need to manipulate, because there's so many of them...

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Okay, I see that you are using div elements inside of p, that’s not valid. Try to use span instead.

And the Stylesheet is inside of the component you are workin on. Ignore everything inside the node modules folder. That are third party styles that not all are applied.

When you are searching for global styles, the are not .css but .scss files. The local styles live inside the .vue files then selve in an Style Tag. See https://vuejs.org/v2/guide/single-file-components.html

Copy link
Member

@appinteractive appinteractive Sep 16, 2018 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would stick with local styling in this case or see the https://bulma.io documentation for the available styles.

{{ $t('quotes.african.author') }}
</div>
</p>
<p class="subtitle is-6">
<span style="color: #f33">♥</span><br />
<div class="content">
<a href="https://human-connection.org"
target="_blank"
v-html="$t('humanConnectionPresentationLinkText')" />
<br />
{{ $t('humanConnectionPresentationText') }}
</div>
</p>
</div>
<footer class="card-footer">
<!--
Expand Down