Skip to content

Commit

Permalink
Merge pull request #138 from lowercasename/rk/style-overhaul
Browse files Browse the repository at this point in the history
Style overhaul
  • Loading branch information
lowercasename authored May 26, 2024
2 parents 53288fa + 4ce9c7d commit 43296cd
Show file tree
Hide file tree
Showing 22 changed files with 387 additions and 165 deletions.
2 changes: 1 addition & 1 deletion config/config.example.toml
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
domain = "localhost:3000"
port = "3000"
email = "[email protected]"
site_name = "gathio"
site_name = "Gathio"
is_federated = true
# Events will be deleted this many days after they have ended. Set to 0 to
# disable automatic deletion (old events will never be deleted).
Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "gathio",
"version": "1.4.1",
"version": "1.5.0",
"description": "A simple, federated, privacy-first event hosting platform",
"main": "index.js",
"type": "module",
Expand Down
230 changes: 209 additions & 21 deletions public/css/style.css
Original file line number Diff line number Diff line change
@@ -1,6 +1,10 @@
/* TYPOGRAPHY */
@import url("https://fonts.googleapis.com/css2?family=Fredoka:[email protected]&display=swap");

body {
color: var(--color--black);
}

h1,
h2,
h3 {
Expand All @@ -18,33 +22,212 @@ h3 {
font-style: normal;
}

:root {
--color-purple: hsl(273, 44%, 58%);
--color-purple-dark: hsl(273, 44%, 38%);
--color-purple-lighter: hsl(273, 44%, 86%);
--color-purple-light: hsl(273, 44%, 96%);
--color-red: hsl(359, 100%, 65%);
--color-red-dark: hsl(359, 100%, 45%);
--color-grey-99: hsl(0, 0%, 99%);
--color-grey-97: hsl(0, 0%, 97%);
--color-grey-95: hsl(0, 0%, 95%);
--color-grey-90: hsl(0, 0%, 90%);
--color-grey-85: hsl(0, 0%, 85%);
--color-grey-80: hsl(0, 0%, 80%);
--color-grey-75: hsl(0, 0%, 75%);
--color-grey-70: hsl(0, 0%, 70%);
--color-grey-60: hsl(0, 0%, 60%);
--color-grey-50: hsl(0, 0%, 50%);
--color-grey-40: hsl(0, 0%, 40%);
--color-grey-30: hsl(0, 0%, 30%);
--color-grey-20: hsl(0, 0%, 20%);
--color--black: hsl(0, 0%, 10%);
--transition: 0.15s ease-in;
}

.flex-gap {
display: flex;
gap: 1rem;
}

.flex-gap--small {
display: flex;
gap: 0.5rem;
}

.button {
display: inline-block;
height: 2.25rem;
line-height: 2.25rem;
border-radius: 2.25rem;
font-weight: 500;
letter-spacing: 0.35px;
transition: background var(--transition);
text-decoration: none;
border: none;
font-size: 0.95rem;
padding: 0 1rem;
white-space: nowrap;
text-align: center;
}

.button:hover {
text-decoration: none;
color: inherit;
}

.button--primary {
background: var(--color-purple);
color: #fff;
}

.button--primary:hover {
background: var(--color-purple-dark);
color: #fff;
}

.button--secondary {
background: var(--color-grey-85);
color: var(--color-black);
}

.button--secondary:hover {
background: var(--color-grey-70);
}

.button--outline-primary {
background: transparent;
border: 1px solid var(--color-purple);
color: var(--color-purple);
}

.button--outline-primary:hover {
border: 1px solid var(--color-purple-dark);
background: var(--color-purple-light);
color: var(--color-purple-dark);
}

.button--outline-secondary {
background: transparent;
border: 1px solid var(--color-grey-75);
color: var(--color-grey-30);
}

.button--outline-secondary:hover {
border: 1px solid var(--color-grey-70);
background: var(--color-purple-light);
}

.button--sm {
height: 1.75rem;
line-height: 1.65rem;
border-radius: 1.75rem;
font-size: 0.85rem;
padding: 0 0.75rem;
}

.button--lg {
height: 2.75rem;
line-height: 2.75rem;
border-radius: 2.75rem;
font-size: 1.05rem;
padding: 0 1.25rem;
}

.button--danger {
background: var(--color-red);
color: #fff;
}

.button--danger:hover {
background: var(--color-red-dark);
color: #fff;
}

.button--primary:disabled {
background: var(--color-purple-lighter);
color: var(--color-grey-50);
}

.button--secondary:disabled {
background: var(--color-grey-97);
color: var(--color-grey-75);
}

.button--danger:disabled {
background: #f9d4d4;
color: #ff4d4f;
}

.button--outline-primary:disabled {
background: transparent;
border: 1px solid var(--color-purple-lighter);
color: var(--color-purple-lighter);
}

.button--outline-secondary:disabled {
background: transparent;
border: 1px solid var(--color-grey-85);
color: var(--color-grey-85);
}

.button-stack {
display: flex;
flex-direction: column;
}

.button-stack > .button:not(:first-child):not(:last-child) {
border-radius: 0;
}

.button-stack > .button:not(:last-child) {
border-bottom: none;
}

.button-stack > .button:first-child {
border-radius: 1rem 1rem 0 0;
}

.button-stack > .button:last-child {
border-radius: 0 0 1rem 1rem;
}

.button-stack > .button.button--sm {
height: 2rem;
line-height: 2rem;
}

.button-stack > .button.button--sm {
height: 2rem;
line-height: 2rem;
}

/* LAYOUT */

html {
width: 100%;
}

body {
background: #f8f8f8;
display: flex;
flex-direction: column;
min-height: 100vh;
align-items: center;
background: var(--color-grey-97);
}

body > #container {
min-height: 100vh;
width: 100%;
max-width: 75rem;
display: grid;
margin: 0 auto;
grid-template-columns: 1fr;
grid-template-rows: min-content auto;
padding: 0;
}

#container > #content {
overflow: hidden;
border: 1px solid #eaeaea;
background: #ffffff;
border: 1px solid var(--color-grey-90);
background: #fff;
display: flex;
flex-direction: column;
}
Expand All @@ -66,7 +249,7 @@ body > #container {
border-top: 1px solid #e0e0e0;
text-align: center;
padding: 0.25rem 0;
background: #fdfdfd;
background: var(--color-grey-99);
}

#container > #content > footer p {
Expand All @@ -77,6 +260,7 @@ body > #container {
body > #container {
padding: 1rem;
grid-template-columns: 1fr 4fr;
grid-template-rows: auto;
gap: 1rem;
}
#container > #content {
Expand Down Expand Up @@ -117,7 +301,12 @@ body > #container {

#sidebar h1 a:hover {
text-decoration: none;
background: linear-gradient(to right, #27aa45, #7fe0c8, #5d26c1);
background: linear-gradient(
to right,
rgb(1, 76, 173),
rgb(128, 224, 200),
var(--color-purple)
);
background-size: 100% 100%;
background-clip: text;
-webkit-background-clip: text;
Expand Down Expand Up @@ -157,7 +346,7 @@ ul#sidebar__nav a {
width: 100%;
padding: 0 0 0.5rem 0;
}
ul#sidebar__nav li:has(a:not(.btn)):not(:last-child) {
ul#sidebar__nav li:has(a:not(.button)):not(:last-child) {
border-bottom: 1px solid #e0e0e0;
}

Expand Down Expand Up @@ -252,6 +441,11 @@ ul#sidebar__nav a {
flex-wrap: wrap;
}

#event__actions #editEvent {
width: 100%;
margin-top: 16px;
}

.attendeesList > li {
border: 4px solid #0ea130;
border-radius: 2em;
Expand Down Expand Up @@ -355,7 +549,7 @@ li.hidden-attendee .attendee-name {
flex-direction: column;
align-items: flex-start;
}
#eventAttendees h5 .btn-group {
#eventAttendees h5 .button--group {
margin-top: 0.5rem;
}

Expand All @@ -365,7 +559,7 @@ li.hidden-attendee .attendee-name {
justify-content: space-between;
align-items: center;
}
#eventAttendees h5 .btn-group {
#eventAttendees h5 .button--group {
margin-top: 0;
}
}
Expand Down Expand Up @@ -428,12 +622,6 @@ li.hidden-attendee .attendee-name {

/* FORMS */

#newEventFormContainer,
#importEventFormContainer,
#newEventGroupFormContainer {
display: none;
}

#icsImportLabel {
overflow: hidden;
text-overflow: ellipsis;
Expand Down Expand Up @@ -524,10 +712,10 @@ img.group-preview__image {
}
}

.btn--loading {
.button--loading {
position: relative;
}
.btn--loading::after {
.button--loading::after {
content: "";
position: absolute;
left: -45%;
Expand Down Expand Up @@ -573,7 +761,7 @@ img.group-preview__image {
/* EVENT AND GROUP LISTS */

.list-group-item-action:hover {
background-color: #f2f8ff;
background-color: var(--color-purple-light);
}

/* STATIC PAGES */
Expand Down
11 changes: 10 additions & 1 deletion public/js/modules/event-edit.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@ $(document).ready(function () {
label_selected: "Change file",
no_label: false,
});
autosize($("textarea"));
if (window.eventData.image) {
$("#event-image-preview").css(
"background-image",
Expand All @@ -18,6 +17,16 @@ $(document).ready(function () {
}
});

$('#editModal').on('shown.bs.modal', function (e) {
console.log('hii');
const ta = document.querySelector("#editModal textarea");
ta.style.display = 'none';
autosize(ta);
ta.style.display = '';
// Call the update method to recalculate the size:
autosize.update(ta);
});

function editEventForm() {
return {
data: {
Expand Down
Loading

0 comments on commit 43296cd

Please sign in to comment.