Skip to content

Commit

Permalink
Merge pull request #164 from teamhanko/example-app-style-improvements
Browse files Browse the repository at this point in the history
  • Loading branch information
FlxMgdnz authored Aug 3, 2022
2 parents be6eb70 + 41e765d commit 9f415cc
Show file tree
Hide file tree
Showing 18 changed files with 124 additions and 145 deletions.
69 changes: 42 additions & 27 deletions example/public/assets/css/common.css
Original file line number Diff line number Diff line change
@@ -1,47 +1,62 @@
@import url("fonts.css");

body {
margin: 0;
text-align: center;
font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
font-family: Inter, sans-serif;
color: white;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background: url("../img/bg.png") no-repeat center center fixed;
background: url("../img/bg.jpg") no-repeat center center fixed;
background-size: cover;
}

.main {
margin-top: 8rem;
.nav__itemList {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}

.nav__listItem {
float: right;
}

.nav__link,
.nav__link:visited,
.nav__link:hover,
.nav__link:active {
display: block;
margin: 2.5rem;
color: white;
background-color: transparent;
text-decoration: none;
}

.nav__link:hover {
text-decoration: underline;
}

.content {
margin: auto;
margin-bottom: 30px;
padding: 0 100px;
max-width: 1200px;
}

@media screen and (max-width: 470px) {
.content {
padding: 0 20px;
}
}

.footer {
margin-top: 6rem;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
margin-top: 100px;
}

.footer img{
padding-bottom: 2.5rem;
}

@media screen and (max-height: 667px) {
.main {
margin-top: 1rem;
}
.footer {
margin-top: 2rem;
}
.footer img {
padding-bottom: 1.5rem;
}
padding-bottom: 2rem;
}

@media screen and (max-width: 600px) {
.main {
padding: 0 1.25rem;
}
}
45 changes: 27 additions & 18 deletions example/public/assets/css/index.css
Original file line number Diff line number Diff line change
@@ -1,33 +1,40 @@
@import url("common.css");

hanko-auth {
--brand-color-h: 230;
--brand-color-s: 100%;
--brand-color-l: 90%;
.main {
margin-top: 10%;
}

.auth-container {
background-color: white;
max-width: 370px;
min-width: 200px;
margin: auto;
border-radius: 16px;
padding: 25px;
}

@media screen and (max-width: 470px) {
.main {
margin-top: 8px;
}
.auth-container {
padding: 5px;
}
}

hanko-auth {
--font-family: "Inter", sans-serif;
--border-radius: 16px;
--input-height: 52px;
--border-radius: 5px;
}

hanko-auth::part(input) {
border-radius: 5px;
border-color: #BFC2CD;
}

hanko-auth::part(container) {
margin: auto;
min-width: 300px;
max-width: 450px;
padding: 20px;
}

hanko-auth::part(primary-button) {
background-color: #CBD4FF;
color: black;
border-style: none;
border-radius: 5px;
height: 52px;
font-weight: 500;
}

Expand All @@ -39,8 +46,6 @@ hanko-auth::part(secondary-button) {
background-color: #506CF0;
color: white;
border-style: none;
border-radius: 5px;
height: 52px;
font-weight: 500;
}

Expand All @@ -51,3 +56,7 @@ hanko-auth::part(secondary-button):hover {
hanko-auth::part(divider) {
border-bottom-color: #BFC2CD;
}

hanko-auth::part(link) {
color: #688293;
}
34 changes: 2 additions & 32 deletions example/public/assets/css/secured.css
Original file line number Diff line number Diff line change
@@ -1,35 +1,5 @@
@import url("common.css");

.main {
color: white;
}

.nav__itemList {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}

.nav__listItem {
float: right;
}

.nav__link,
.nav__link:visited,
.nav__link:hover,
.nav__link:active {
display: block;
margin: 2.5rem;
color: white;
background-color: transparent;
text-decoration: none;
}

.nav__link:hover {
text-decoration: underline;
}

.profile {
min-height: 350px;
}
margin-bottom: 20px;
}
22 changes: 0 additions & 22 deletions example/public/assets/css/unauthorized.css

This file was deleted.

Binary file added example/public/assets/img/Favicon_256x256.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added example/public/assets/img/Favicon_32x32.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added example/public/assets/img/bg.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed example/public/assets/img/bg.png
Binary file not shown.
17 changes: 14 additions & 3 deletions example/public/html/error.html
Original file line number Diff line number Diff line change
Expand Up @@ -3,16 +3,27 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Unauthorized</title>
<link rel="stylesheet" href="static/css/unauthorized.css"/>
<title>Hanko Web Component Example</title>
<link rel="stylesheet" href="static/css/common.css"/>
<link href="../static/img/Favicon_32x32.png" rel="shortcut icon" type="image/x-icon">
<link href="../static/img/Favicon_256x256.png" rel="apple-touch-icon">
</head>
<body>

<header>
<nav class="nav">
<ul class="nav__itemList">
<li class="nav__listItem">
<a class="nav__link" href="/">Back to login</a>
</li>
</ul>
</nav>
</header>

<main class="main">
<div class="content">
<h1>Error</h1>
<p>{{ .error }}</p>
<span>Back to<a href="/">Login</a></span>
</div>
</main>

Expand Down
9 changes: 7 additions & 2 deletions example/public/html/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -4,14 +4,19 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Hanko Web Component Test</title>
<meta name="theme-color" content="#042F4B">
<title>Hanko Web Component Example</title>
<link rel="stylesheet" href="static/css/index.css">
<script type="text/javascript" src="{{.HankoElementUrl}}"></script>
<link href="../static/img/Favicon_32x32.png" rel="shortcut icon" type="image/x-icon">
<link href="../static/img/Favicon_256x256.png" rel="apple-touch-icon">
</head>
<body>

<main class="main">
<hanko-auth lang="en" api="{{.HankoUrl}}"></hanko-auth>
<div class="auth-container">
<hanko-auth lang="en" api="{{.HankoUrl}}"></hanko-auth>
</div>
</main>

<footer class="footer">
Expand Down
19 changes: 12 additions & 7 deletions example/public/html/secured.html
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,11 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>Secured</title>
<meta name="theme-color" content="#042F4B">
<title>Hanko Web Component Example</title>
<link rel="stylesheet" href="static/css/secured.css"/>
<link href="../static/img/Favicon_32x32.png" rel="shortcut icon" type="image/x-icon">
<link href="../static/img/Favicon_256x256.png" rel="apple-touch-icon">
</head>
<body>
<header>
Expand All @@ -18,12 +21,14 @@
</header>

<main class="main">
<div class="profile">
<div class="profile__title">
<h1>My Profile</h1>
</div>
<div class="profile__email">
<span>{{ .user }}</span>
<div class="content">
<div class="profile">
<div class="profile__title">
<h1>My Profile</h1>
</div>
<div class="profile__email">
<span>{{ .user }}</span>
</div>
</div>
</div>
</main>
Expand Down
17 changes: 14 additions & 3 deletions example/public/html/unauthorized.html
Original file line number Diff line number Diff line change
Expand Up @@ -3,15 +3,26 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Unauthorized</title>
<link rel="stylesheet" href="static/css/unauthorized.css"/>
<title>Hanko Web Component Example</title>
<link rel="stylesheet" href="static/css/common.css"/>
<link href="../static/img/Favicon_32x32.png" rel="shortcut icon" type="image/x-icon">
<link href="../static/img/Favicon_256x256.png" rel="apple-touch-icon">
</head>
<body>

<header>
<nav class="nav">
<ul class="nav__itemList">
<li class="nav__listItem">
<a class="nav__link" href="/">Back to login</a>
</li>
</ul>
</nav>
</header>

<main class="main">
<div class="content">
<h1>Unauthorized</h1>
<span>Back to<a href="/">Login</a></span>
</div>
</main>

Expand Down
9 changes: 2 additions & 7 deletions hanko-js/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -109,11 +109,8 @@ hanko-auth {
--color-s: 0%;
--color-l: 0%;
--container-max-height: 500px;
--container-max-width: 450px;
--container-min-height: 500px;
--container-min-width: 450px;
--container-padding: 25px;
--container-padding: 20px;
--container-max-width: 600px;
--error-color-h: 351;
--error-color-s: 100%;
Expand Down Expand Up @@ -187,8 +184,6 @@ hanko-auth {
--input-height: 45px;
--item-margin: 10px;
--container-min-height: 0;
--container-min-width: 350px;
--container-max-width: 450px;
--container-padding: 10px 20px;
Expand Down
2 changes: 0 additions & 2 deletions hanko-js/src/test.html
Original file line number Diff line number Diff line change
Expand Up @@ -32,8 +32,6 @@
--input-height: 45px;
--item-margin: 10px;

--container-min-height: 0;
--container-min-width: 350px;
--container-max-width: 450px;
--container-padding: 10px 20px;

Expand Down
9 changes: 1 addition & 8 deletions hanko-js/src/ui/components/Container.sass
Original file line number Diff line number Diff line change
Expand Up @@ -3,19 +3,12 @@
.container
background-color: default.$container-background
padding: default.$container-padding
min-width: default.$container-min-width
max-width: default.$container-max-width
min-height: default.$container-min-height
max-height: default.$container-max-height
border-style: default.$container-border-style
border-width: default.$container-border-width
border-color: default.$container-border-color
border-radius: default.$container-border-radius

display: flex
flex-direction: column
flex-wrap: nowrap
justify-content: center
align-items: center
align-content: flex-start
box-sizing: border-box
box-sizing: border-box
Loading

0 comments on commit 9f415cc

Please sign in to comment.