Skip to content

Commit

Permalink
Improve generator section
Browse files Browse the repository at this point in the history
  • Loading branch information
@sabrinapayet
sabrinapayet committed Apr 23, 2022
1 parent e830114 commit e89808a
Show file tree
Hide file tree
Showing 2 changed files with 60 additions and 52 deletions.
68 changes: 30 additions & 38 deletions src/main/webapp/app/springboot/primary/Generator.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<nav class="container-fluid flex-wrap flex-md-nowrap align-text-center" aria-label="Main navigation">
<div class="navbar-brand text-decoration-none d-flex align-items-center gap-4">
<img src="../../../content/JHipster-Lite-neon-blue.png" alt="" width="48" />
<span class="fs-3 text-decoration-none text-white title" :data-selector="selectorPrefix + '.title'">JHipster Lite</span>
<span class="fs-3 text-decoration-none text-white title" :data-selector="selectorPrefix + '.title'">JHipster lite</span>
</div>
<button
class="navbar-toggler text-primary"
Expand Down Expand Up @@ -150,8 +150,8 @@
/>
<div class="row p-2">
<div class="list-group--inline mx-0">
<div class="list-group-item align-items-center gap-3 py-3" aria-current="true">
<div class="gap-2 w-100 justify-content-between">
<div class="list-group-item align-items-center gap-3 py-2" aria-current="true">
<div class="w-100 justify-content-between">
<label>
<input id="language" class="form-check-input flex-shrink-0" type="radio" name="language" value="java" checked />
<span> Java </span>
Expand All @@ -171,8 +171,8 @@
/>
<div class="row p-2">
<div class="list-group--inline mx-0">
<div class="list-group-item align-items-center gap-3 py-3" aria-current="true">
<div class="gap-2 w-100 justify-content-between">
<div class="list-group-item align-items-center gap-3 py-2" aria-current="true">
<div class="w-100 justify-content-between">
<label>
<input
id="buildTool"
Expand All @@ -188,8 +188,8 @@
</div>
<img src="../../../content/MavenLogo.png" alt="" width="32" height="32" class="rounded-circle flex-shrink-0" />
</div>
<div class="list-group-item align-items-center gap-3 py-3" aria-current="true">
<div class="gap-2 w-100 justify-content-between">
<div class="list-group-item align-items-center gap-3 py-2" aria-current="true">
<div class="w-100 justify-content-between">
<label>
<input
id="buildTool"
Expand Down Expand Up @@ -218,8 +218,8 @@
/>
<div class="row p-2">
<div class="list-group--inline mx-0">
<div class="list-group-item align-items-center gap-3 py-3" aria-current="true">
<div class="gap-2 w-100 justify-content-between">
<div class="list-group-item align-items-center gap-3 py-2" aria-current="true">
<div class="w-100 justify-content-between">
<label>
<input
id="option-no-server"
Expand All @@ -241,8 +241,8 @@
class="rounded-circle flex-shrink-0"
/>
</div>
<div class="list-group-item align-items-center gap-3 py-3" aria-current="true">
<div class="gap-2 w-100 justify-content-between">
<div class="list-group-item align-items-center gap-3 py-2" aria-current="true">
<div class="w-100 justify-content-between">
<label>
<input
id="option-springboot"
Expand Down Expand Up @@ -272,8 +272,8 @@
/>
<div class="row p-2">
<div class="list-group--inline mx-0">
<div class="list-group-item align-items-center gap-3 py-3" aria-current="true">
<div class="gap-2 w-100 justify-content-between">
<div class="list-group-item align-items-center gap-3 py-2" aria-current="true">
<div class="w-100 justify-content-between">
<label>
<input
id="option-none-client"
Expand All @@ -296,8 +296,8 @@
class="rounded-circle flex-shrink-0"
/>
</div>
<div class="list-group-item align-items-center gap-3 py-3" aria-current="true">
<div class="gap-2 w-100 justify-content-between">
<div class="list-group-item align-items-center gap-3 py-2" aria-current="true">
<div class="w-100 justify-content-between">
<label>
<input
id="option-angular"
Expand All @@ -313,8 +313,8 @@
</div>
<img src="../../../content/AngularLogo.png" alt="" width="32" height="32" class="rounded-circle flex-shrink-0" />
</div>
<div class="list-group-item align-items-center gap-3 py-3" aria-current="true">
<div class="gap-2 w-100 justify-content-between">
<div class="list-group-item align-items-center gap-3 py-2" aria-current="true">
<div class="w-100 justify-content-between">
<label>
<input
id="option-react"
Expand All @@ -330,8 +330,8 @@
</div>
<img src="../../../content/ReactLogo.png" alt="" width="32" height="32" class="rounded-circle flex-shrink-0" />
</div>
<div class="list-group-item align-items-center gap-3 py-3" aria-current="true">
<div class="gap-2 w-100 justify-content-between">
<div class="list-group-item align-items-center gap-3 py-2" aria-current="true">
<div class="w-100 justify-content-between">
<label>
<input
id="option-vue"
Expand All @@ -347,8 +347,8 @@
</div>
<img src="../../../content/VueLogo.png" alt="" width="32" height="32" class="rounded-circle flex-shrink-0" />
</div>
<div class="list-group-item align-items-center gap-3 py-3" aria-current="true">
<div class="gap-2 w-100 justify-content-between">
<div class="list-group-item align-items-center gap-3 py-2" aria-current="true">
<div class="w-100 justify-content-between">
<label>
<input
id="option-svelte"
Expand All @@ -370,14 +370,14 @@
</div>
</div>
</div>
<div class="row my-4 py-3 d-flex align-items-start">
<div class="col-12 col-md-3 col-lg-4">
<div class="row my-4 d-flex align-items-start border-bottom border-secondary border-2 shadow-lg">
<div class="col-12 col-md-4 col-lg-4 px-0 bg-secondary">
<ul id="v-pills-tab" class="nav nav-pills flex-column w-100" role="tablist" aria-orientation="vertical">
<li class="nav-item">
<div class="focus-helper" tabindex="-1"></div>
<button
id="section-init"
class="nav-link active"
class="nav-link fw-bold active"
data-bs-toggle="tab"
data-bs-target="#v-pills-init"
role="tab"
Expand All @@ -394,7 +394,7 @@
<button
id="section-springboot"
:data-selector="selectorPrefix + '.section-springboot'"
class="nav-link text-spring"
class="nav-link fw-bold text-spring"
data-bs-toggle="tab"
data-bs-target="#v-pills-springboot"
role="tab"
Expand All @@ -415,7 +415,7 @@
<button
id="section-angular"
:data-selector="selectorPrefix + '.section-angular'"
class="nav-link text-angular"
class="nav-link fw-bold text-angular"
data-bs-toggle="tab"
data-bs-target="#v-pills-angular"
type="button"
Expand Down Expand Up @@ -457,7 +457,7 @@
<button
id="section-react"
:data-selector="selectorPrefix + '.section-react'"
class="nav-link text-react"
class="nav-link fw-bold text-react"
data-bs-toggle="tab"
data-bs-target="#v-pills-react"
type="button"
Expand All @@ -482,7 +482,7 @@
<button
id="section-vue"
:data-selector="selectorPrefix + '.section-vue'"
class="nav-link text-vue"
class="nav-link fw-bold text-vue"
data-bs-toggle="tab"
data-bs-target="#v-pills-vue"
type="button"
Expand All @@ -501,7 +501,7 @@
<button
id="section-svelte"
:data-selector="selectorPrefix + '.section-vue'"
class="nav-link text-svelte"
class="nav-link fw-bold text-svelte"
data-bs-toggle="tab"
data-bs-target="#v-pills-svelte"
type="button"
Expand All @@ -516,7 +516,7 @@
</ul>
</div>

<div class="col">
<div class="col py-2">
<div id="v-pills-tab" class="tab-content">
<div id="v-pills-init" class="tab-pane fade show active" role="tabpanel" aria-labelledby="v-pills-home-tab">
<button id="init" class="btn btn-outline-primary" :data-selector="selectorPrefix + '.init-button'" @click.prevent="initProject">
Expand Down Expand Up @@ -749,14 +749,6 @@
</div>
</div>
</main>
<footer class="d-flex flex-wrap justify-content-between align-items-center py-3 my-4 border-top">
<div class="col-md-4 d-flex align-items-center">
<a href="https://www.jhipster.tech/" target="_blank" rel="noopener" class="mb-3 me-2 mb-md-0 text-muted text-decoration-none lh-1">
<img src="../../../content/JHipster-Lite-neon-blue_40x.png" alt="" />
</a>
<span class="text-muted">© 2022 JHipster Lite</span>
</div>
</footer>
</template>

<script lang="ts" src="./Generator.component.ts"></script>
44 changes: 30 additions & 14 deletions src/main/webapp/content/css/custom.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,9 +19,10 @@
--variant-color-orange: #ffefcd;
--default-border-color: #e2e8f0;
--bs-primary: #152e44;
--bs-secondary-rgb-hover: 241, 226, 213;
--bs-secondary-rgb: 248, 241, 234;
--primary-color-light: #4ba8f8;
--success-color: #00543c;
--bs-secondary: #b86f2f;
}

.bd-navbar .navbar-nav-svg {
Expand Down Expand Up @@ -69,43 +70,45 @@ a:hover {
color: var(--primary-color-light);
}
.nav-link:focus,
a:focus {
color: var(--primary-color-focus);
a:focus,
button.nav-link {
color: var(--primary-color-light);
}
.nav-pills .nav-link {
width: 100%;
border-radius: 0;
}
.nav-pills {
padding: 0 16px;
padding: 0;
min-height: 48px;
}
.nav-pills li {
padding: 4px 0;
padding: 0;
}
.nav-pills .nav-link.active {
color: var(--primary-color);
border-bottom: 2px solid currentColor;
background: none;
box-shadow: inset -0.25em 0em currentColor;
background: rgba(var(--bs-light-rgb), var(--bs-bg-opacity)) !important;
cursor: default;
}
.nav-pills .nav-link.active:hover {
background: rgba(var(--bs-light-rgb), var(--bs-bg-opacity)) !important;
}
.nav-pills button {
align-items: center;
display: flex;
flex-direction: column;
margin: 0;
padding: 1rem;
}
button:not(:last-child) {
margin-right: 0.75rem;
}
button {
margin-bottom: 0.5rem;
}
.btn-block {
display: block;
width: 100%;
}
.nav-pills .nav-link:hover {
--bs-bg-opacity: 1;
background-color: rgba(var(--bs-light-rgb), var(--bs-bg-opacity)) !important;
background-color: rgba(var(--bs-secondary-rgb-hover), var(--bs-bg-opacity)) !important;
}

.separator--vertical {
Expand All @@ -124,7 +127,7 @@ hr:not([size]).separator--vertical {
display: inline-flex;
max-width: 100%;
width: auto;
padding: 0.5rem 1.5rem;
padding: 0.25rem 1rem;
}
.list-group--inline > .list-group-item:not(:last-child) {
margin-right: 0.75rem;
Expand Down Expand Up @@ -203,3 +206,16 @@ input[type='radio'] {
.text-svelte {
color: #ff3e00 !important;
}
.border-secondary {
border-color: var(--secondary-color) !important;
}
.bg-secondary {
--bs-bg-opacity: 1;
}

@media (max-width: 768px) {
.nav-pills .nav-link.active {
color: var(--primary-color);
box-shadow: inset 0em -0.15em currentColor;
}
}

0 comments on commit e89808a

Please sign in to comment.