pedrocx486/ngx-retroblog
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

I hate this code. Needs to be completely rewritten

Browse source
This commit is contained in:
pedrocx486 2023-03-05 01:54:59 -03:00
parent 8c24fbc872
commit 57edc63f24
15 changed files with 105 additions and 89 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/app/archives/archives.component.html
View file

@ -4,9 +4,9 @@
</div>
<div class="text-center">
<input type="text" placeholder="Search by Title" (keyup)="searchArchive($event.target!.value)">
<input type="text" placeholder="Search by title" (keyup)="searchArchive($event.target!.value)">
&nbsp;
<button class="btn-bad-action" type="button" (click)="searchArchive('', true);">× CLEAR</button>
<button class="btn" type="button" (click)="searchArchive('', true);">× CLEAR</button>
</div>
<div class="list-group" *ngIf="filteredArchives.length > 0">
@ -22,6 +22,6 @@
<div class="margin-y text-center" *ngIf="!!settings.username">
<a href="./">
<button type="button" class="margins-sides btn-secondary btn-fat">« HOME »</button>
<button type="button" class="margins-sides btn btn-fat">« HOME »</button>
</a>
</div>

2
src/app/archives/archives.component.scss
View file

@ -2,7 +2,7 @@ input[type="text"] {
width: 30%;
}
@media only screen and (hover: none) {
@media screen and (max-width: 600px) {
input[type="text"] {
width: 55%;
}

2
src/app/home/home.component.html
View file

@ -15,6 +15,6 @@
<div class="text-center">
<a href="./?page=archives">
<button type="button" class="btn-fat btn-primary margins-sides margin-y">« ARCHIVES »</button>
<button type="button" class="btn-fat btn margins-sides margin-y">« ARCHIVES »</button>
</a>
</div>

6
src/app/posts/posts.component.html
View file

@ -44,13 +44,13 @@
<div class="margin-y text-center" *ngIf="settings.username">
<a href="./">
<button type="button" class="margins-sides btn-secondary btn-fat">« HOME »</button>
<button type="button" class="margins-sides btn btn-fat">« HOME »</button>
</a>
<br />
&nbsp;
<a href="./?page=archives">
<button type="button" class="margin-top margins-sides btn-primary btn-fat">
<button type="button" class="margins-sides btn btn-fat">
« ARCHIVES »
</button>
</a>

16
src/app/posts/posts.component.scss
View file

@ -3,22 +3,19 @@
padding: 1rem;
margin-top: 5rem !important;
margin: 0 auto;
background-color: rgb(56, 56, 56);
box-shadow: #000a 4px 4px;
background-color: rgb(37, 37, 37);
width: 50%;
.avatar {
padding: 0 1rem 0 1rem;
display: inline-block;
max-width: 200px;
max-height: 150px;
max-width: 100px;
max-height: 100px;
}
.avatar img {
border: 3px solid #6100a2;
border-radius: 5px;
max-width: 200px;
max-height: 150px;
max-width: 100px;
max-height: 100px;
display: block;
}
@ -27,7 +24,6 @@
.bio-username {
color: rgb(255, 255, 255);
text-shadow: 0px 0px 10px #00bc97;
font-size: larger;
}
@ -41,7 +37,7 @@
}
}
@media only screen and (hover: none) {
@media screen and (max-width: 600px) {
.margins {
margin: unset;
}

25
src/assets/posts/archive.json
View file

@ -1,4 +1,29 @@
[
{
"postTitle": "Hello World!",
"timestamp": "1654062776",
"filename": "hello-world"
},
{
"postTitle": "Hello World!",
"timestamp": "1654062776",
"filename": "hello-world"
},
{
"postTitle": "Hello World!",
"timestamp": "1654062776",
"filename": "hello-world"
},
{
"postTitle": "Hello World!",
"timestamp": "1654062776",
"filename": "hello-world"
},
{
"postTitle": "Hello World!",
"timestamp": "1654062776",
"filename": "hello-world"
},
{
"postTitle": "Hello World!",
"timestamp": "1654062776",

7
src/shared/components/navigation/navigation.component.html
View file

@ -1,6 +1,9 @@
<div class="topnav" *ngIf="!!settings.username">
<a class="no-focus" href="./">{{settings.blogTitle}}</a>
<a href="./" [class.active]="isCurrentPage('/')">Home</a>
<a class="no-focus" href="./" style="color: rgb(229, 114, 0)">
{{settings.blogTitle}}
<span class="pointy-thingy">»</span>
</a>
<a href="./" class="first-after-name" [class.active]="isCurrentPage('/')">Home</a>
<a href="./?page=archives" [class.active]="isCurrentPage('/archives')">Archives</a>
<a *ngIf="!!settings?.customUrl?.url" href="{{settings?.customUrl?.url}}" target="_blank">{{settings?.customUrl?.title}}</a>
<a href="javascript:void(0);" class="icon" (click)="openMenu()">

34
src/shared/components/navigation/navigation.component.scss
View file

@ -1,13 +1,13 @@
.topnav {
min-height: 48px;
overflow: hidden;
background-color: #333;
background-color: #2a2a2a;
position: relative;
top: 0;
left: 0;
right: 0;
z-index: 2;
box-shadow: #000a 4px 4px;
box-shadow: #000a 2px 2px;
}
.topnav a {
@ -18,20 +18,24 @@
padding: 15px 16px;
text-decoration: none;
font-size: 17px;
border-right: rgb(159, 159, 159) 1px solid;
border-right: rgb(97, 97, 97) 1px solid;
}
.topnav a:last-child {
border-right: unset;
}
.topnav a:first-child {
border-right: unset;
}
.topnav a:hover:not(.no-focus) {
background-color: #ddd;
background-color: #a1a1a1;
color: black;
}
.topnav a.active {
background-color: rgb(97, 0, 162);
background-color: rgb(229, 114, 0);
color: white;
}
@ -39,11 +43,31 @@
display: none;
}
.topnav .pointy-thingy {
font-size: 2rem;
line-height: 0%;
position: absolute;
margin-top: 0.5rem;
margin-left: 0.2rem;
}
.topnav .first-after-name {
margin-left: 1rem;
}
@media screen and (max-width: 600px) {
.topnav a:not(:first-child) {
display: none;
}
.topnav .first-after-name {
margin-left: unset;
}
.topnav a {
border-right: unset;
}
.topnav a.icon {
float: right;
display: block;

52
src/shared/styles/buttons.scss
View file

@ -5,8 +5,8 @@ button {
text-decoration: none;
padding: 0.6rem;
border: none;
box-shadow: #000a 4px 4px;
font-size: .8rem;
box-shadow: #000a 2px 2px;
font-size: 0.8rem;
}
// Misc.
@ -15,51 +15,11 @@ button {
}
// Primary
.btn-primary {
background-color: rgb(97, 0, 162);
.btn {
background-color: rgb(229, 114, 0);
color: white;
}
.btn-primary:hover {
box-shadow: 0px 0px 7px rgb(97, 0, 162);
}
// Secondary
.btn-secondary {
background-color: #00d199;
color: #444;
}
.btn-secondary:hover {
box-shadow: 0px 0px 7px #00d199;
}
// Tertiary
.btn-tertiary {
background-color: #17a2b8;
color: white;
}
.btn-tertiary:hover {
box-shadow: 0px 0px 7px #17a2b8;
}
// Action
.btn-action {
background-color: #00905e;
color: white;
}
.btn-action:hover {
box-shadow: 0px 0px 7px #00905e;
}
// Action
.btn-bad-action {
background-color: #cf2200;
color: white;
}
.btn-bad-action:hover {
box-shadow: 0px 0px 7px #cf2200;
.btn:hover {
box-shadow: unset;
}

16
src/shared/styles/cards.scss
View file

@ -1,21 +1,22 @@
// Cards
.card {
border: none;
box-shadow: #000a 4px 4px;
box-shadow: #000a 2px 2px;
}
.card-header {
border-bottom: none;
background-color: rgb(97, 0, 162);
padding: 1rem;
background-color: rgb(86, 86, 86);
padding: 0.5rem;
padding-bottom: 1rem;
margin-bottom: 0;
}
.title {
color: #00ffea !important;
color: #c2c2c2 !important;
text-decoration: none;
font-size: 1.5rem;
font-weight: 500;
font-size: 1rem;
font-weight: 300;
}
.timestamp {
@ -29,6 +30,3 @@
margin-top: -10px;
color: #bbb;
}
// .card-text {
// }

2
src/shared/styles/inputs.scss
View file

@ -12,5 +12,5 @@ input[type="text"] {
background-color: transparent;
color: white;
font-size: 15px;
box-shadow: #000a 4px 4px;
box-shadow: #000a 2px 2px;
}

7
src/shared/styles/lists.scss
View file

@ -1,17 +1,18 @@
// Lists
.list-group {
padding: 2rem;
margin-left: 10%;
margin-right: 10%;
}
.list-item {
padding: 1rem;
border: rgb(88, 88, 88) solid 1px;
background-color: rgb(46, 46, 46);
margin-top: 0.5rem;
box-shadow: #000a 4px 4px;
box-shadow: #000a 2px 2px;
}
.list-item:hover {
background-color: rgb(52, 39, 62);
background-color: rgba(52, 52, 52);
cursor: pointer;
}

4
src/shared/styles/placard.scss
View file

@ -1,13 +1,13 @@
// Placard
.placard {
background-color: rgb(97, 0, 162);
background-color: rgb(59, 59, 59);
text-align: center;
padding: 2rem;
margin: 2rem;
font-weight: 200;
font-size: 1.25rem;
color: white;
box-shadow: #000a 4px 4px;
box-shadow: #000a 2px 2px;
}
.placard-title {

11
src/shared/styles/utils.scss
View file

@ -1,10 +1,12 @@
//Margins
.margins {
margin: 1rem;
margin-left: 15%;
margin-right: 15%;
}
.margins-sides {
width: 40%;
min-width: 20%;
margin: 0 auto;
}
@ -21,3 +23,10 @@
.text-center {
text-align: center;
}
@media screen and (max-width: 600px) {
.margins {
margin-left: 5%;
margin-right: 5%;
}
}

2
src/styles.scss
View file

@ -12,7 +12,7 @@ body {
font-family: monospace;
margin-left: 0.5em;
margin-right: 0.5em;
background-color: #444;
background-color: #363636;
}
// Anchors