From b6a8c9978b0540639c237c2528f635df3f42bbae Mon Sep 17 00:00:00 2001 From: "me@ow.nekobit.net" Date: Tue, 22 Feb 2022 19:24:41 +0000 Subject: [PATCH] URL Prefix, skeleton theme, fix flat theme FossilOrigin-Name: 5cd1e33a10c1c311b4e991c0bc5ef786d8866909e074f5a1f12e48057ea4b3c1 --- config.h | 12 +- dist/ratfe20.css | 14 +- dist/ratfe30.css | 6 +- dist/skel.css | 415 +++++++++++++++++++++++++++++++++++++++++++++ src/base_page.c | 11 +- src/l10n.h | 22 +++ src/status.c | 11 ++ static/config.html | 2 +- static/index.html | 19 ++- static/login.html | 24 ++- static/status.html | 14 +- 11 files changed, 508 insertions(+), 42 deletions(-) create mode 100644 dist/skel.css diff --git a/config.h b/config.h index 86ce021..67df135 100644 --- a/config.h +++ b/config.h @@ -29,10 +29,20 @@ static char* const config_canonical_name = "RatFE"; * This MUST include a slash at the end, and the protocol (like https://) at the * beginning * - * Example: https://cum.desupost.soy/ + * Example: "https://cum.desupost.soy/ */ static char* const config_instance_url = "https://desuposter.club/"; +/* + * String: config_url_prefix + * + * The prefix for all urls. + * For most cases, when you are proxying the CGI paths to root, this will be left blank. + * + * Example: "/ratfe.cgi" + */ +static char* const config_url_prefix = "/ratfe.cgi"; + /* * Bool: experimental_lookup * diff --git a/dist/ratfe20.css b/dist/ratfe20.css index 1a0394d..fb3e2bd 100644 --- a/dist/ratfe20.css +++ b/dist/ratfe20.css @@ -1,15 +1,3 @@ -/* Basic elements */ -body -{ - font-family: Arial, Helvetica, sans-serif; - background-color: #f2f2f2; -} - -a -{ - color: #aa0000; -} - /* Divs and wrappers */ #display-wrapper { @@ -23,7 +11,7 @@ a background-color: #ffffff; width: 1000px; border-radius: 5px; - border: 1pxnn solid #bababa; + border: 1px solid #bababa; box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3); } diff --git a/dist/ratfe30.css b/dist/ratfe30.css index 9029397..a5b33e4 100644 --- a/dist/ratfe30.css +++ b/dist/ratfe30.css @@ -107,7 +107,8 @@ div#content aside * BUTTONS * *************************************************/ input[type=button], input[type=submit], .sidebarbtn, .btn -{ +{ + background: transparent; margin: 4px; border-radius: 3px; border: 1px solid #fcfcfc00; @@ -117,7 +118,8 @@ input[type=button], input[type=submit], .sidebarbtn, .btn } input[type=button]:hover, input[type=submit]:hover, .sidebarbtn:hover, .btn:hover -{ +{ + transform: translate(0px, -2px); background: #ececec; border: 1px solid #dadada; box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.05); diff --git a/dist/skel.css b/dist/skel.css new file mode 100644 index 0000000..6599606 --- /dev/null +++ b/dist/skel.css @@ -0,0 +1,415 @@ +/* Basic elements */ +body +{ + font-family: Arial, Helvetica, sans-serif; +} + +/* Divs and wrappers */ +#display-wrapper +{ + display: flex; + justify-content: center; +} + +#display +{ + overflow: hidden; + width: 1000px; +} + +#navbar +{ + display: flex; + align-items: center; + padding: 0 5px; +} + +#navbar img +{ + display: inline-block; + margin: 2px 2px 2px 8px; +} + +#navbar span.info +{ + margin-left: 15px; + color: #202020; + font-size: 28px; +} + +#navbar-right +{ + padding-right: 8px; + flex: 1; + flex-direction: row; + align-items: center; +} + +#login-header +{ + margin-right: 15px; + text-decoration: none; +} + +.alignend +{ + flex: 1; + display: flex; + flex-direction: column; + justify-content: flex-end; + align-items: flex-end; +} + +div#content +{ + display: flex; +} + +div#content main +{ + flex: 1; + min-width: 0; + min-height: 600px; +} + +div#content aside +{ + width: 180px; + max-width: 180px; + min-width: 180px; +} + +#leftbar ul +{ + margin: 0px 0px 10px 0px; + padding: 0; +} + +#leftbar ul li +{ + list-style-type: none; +} + +/************************************************* + * BUTTONS * + *************************************************/ +input[type=button], input[type=submit], .sidebarbtn, .btn +{ + background: #fafafa; + color: #000; + text-decoration: none; +} + +input[type=button]:hover, input[type=submit]:hover, .sidebarbtn:hover, .btn:hover +{ + + background: #eaeaea; + cursor: pointer; +} + +input[type=button]:active, input[type=submit]:active, .sidebarbtn:active, .btn:active +{ + background: #eaeaea; + cursor: pointer; +} + +input[type=button], input[type=submit] +{ + border: 1px solid #cacaca; + padding: 3px 15px; +} + +.sidebarbtn +{ + display: block; + padding: 4px; +} + +#rightbar +{ + border-left: 1px solid #cacaca; +} + +/*************************** + * Statuses * + **************************/ +.status +{ + display: flex; + margin: 7px; +} + +.status:not(:last-child) +{ + border-bottom: 2px dotted #cacaca; +} + +.status .profile-picture +{ + display: inline-block; + width: 52px; + min-width: 52px; + height: 52px; + background-position: center center; + background-repeat: no-repeat; + background-size: cover; + border-radius: 4px; + margin-bottom: 5px; +} + +.status .status-info +{ + flex: 1; + display: flex; + margin: 0 5px 5px; + min-width: 0; + flex-direction: column; +} + +.status .instance-info +{ + font-style: italic; + text-decoration: none; + margin: 0 3px; +} + +.status .poster-stats +{ + display: flex; +} + +.status .username +{ + font-weight: bold; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; +} + +.status .status-content +{ + margin: 2px 0 0 0; + overflow-wrap: break-word; +} + +.status .status-content p +{ + margin: 2px 0 0 0; +} + +.status-visibility +{ + color: #808080; +} + +.status-interact +{ + margin: 8px 0 2px 0; + display: flex; +} + + +/*************************** + * Element Grouping * + **************************/ +.group +{ + padding: 0; + margin: 0 !important; + height: 28px; + +} + +/* These are a pain for some reason */ +.group-inputbox +{ + border: 1px solid #cacaca; + padding-left: 5px; + border-right: 0px; + height: 26px; +} + +/************************* + * Config * + ************************/ + + +/********************** + * Profiles * + **********************/ +.header-btn +{ + text-decoration: none; + color: #606060; + font-size: 14px; +} + +.header-btn .btn-content +{ + color: #000; +} + +.btn.header-btn:hover span +{ + color: #fff; +} + +.header-btn span +{ + display: block; + text-align: center; +} + +.acct-banner +{ + width: 100%; + display: flex; + background-position: center center; + background-repeat: no-repeat; + background-size: cover; + height: 256px; + align-items: end; +} + +.acct-pfp +{ + position: relative; + z-index: 1; + border: 3px solid #cacaca; + background-color: #fff; + border-radius: 8px; + width: 100px; + height: 100px; + top: 38px; + left: 150px; + margin-top: -108px; + margin-left: -108px; + background-position: center center; + background-repeat: no-repeat; + background-size: cover; +} + +.acct-header +{ + display: flex; + padding-left: 160px; + background: linear-gradient(#fff, #f1f1f1); + border-bottom: 1px solid #cacaca; + background-color: #e8e8e8; +} + +.acct-info-data +{ + position: relative; + left: 160px; + top: -10px; + font-weight: bold; + text-shadow: 0px 2px 6px #000; +} + +.acct-displayname +{ + font-size: 26px; + display: block; + color: #fff; +} + +.acct-username +{ + font-size: 14px; + color: #dadada; + display: block; + font-weight: bold; + text-shadow: 0px 0px 5px #000; +} + +.header-btn +{ + display: inline-block; + padding: 8px 15px; + margin: 0; +} + +/**************** + * Statusbox * + ****************/ +.statusbox +{ + display: flex; + flex-direction: column; + padding: 5px; +} + +.statusbox textarea +{ + width: 100%; + min-width: 100%; + max-width: 100%; + margin-bottom: 5px; +} + +.statusbox .statusfooter +{ + display: flex; + flex-direction: row; +} + +.statusbox .statusfooter-left +{ + flex: 1; +} + + +/* Special cases */ +.nobutton +{ + background: none !important; + background-color: #eaeaea !important; + color: #aa0000 !important; + padding: 0 7px !important; + margin: 0 5px; + text-decoration: none; + cursor: pointer !important; + outline: inherit !important; + font-size: 14px; + border: 1px solid #dadada !important; +} + +.status-interact .nobutton-active, +.nobutton:hover +{ + background-color: #aa0000 !important; + color: #eaeaea !important; + border: 1px solid #770000 !important; +} + +.form-group +{ + padding: 5px; + display: block; +} + +/* Simple page layout */ +.simple-page +{ + padding: 0 12px; +} + +.simple-page h1 +{ + padding-left: 12px; + padding-bottom: 6px; + border-bottom: 1px solid #cacaca; +} + +.simple-page h3 +{ + margin-left: 15px; +} + +.simple-page ul +{ + list-style-type: none; + padding-left: 15px; +} + diff --git a/src/base_page.c b/src/base_page.c index 951b366..70bca65 100644 --- a/src/base_page.c +++ b/src/base_page.c @@ -22,7 +22,7 @@ #include "base_page.h" #include "easprintf.h" #include "cookie.h" - +#include "../config.h" // Files #include "../static/index.chtml" @@ -45,16 +45,25 @@ void render_base_page(struct base_page* page) int len = easprintf(&data, data_index_html, L10N[locale][L10N_APP_NAME], g_config.theme, + config_url_prefix, L10N[locale][L10N_APP_NAME], login_string, + config_url_prefix, L10N[locale][L10N_SEARCH_PLACEHOLDER], L10N[locale][L10N_SEARCH_BUTTON], + config_url_prefix, L10N[locale][L10N_HOME], + config_url_prefix, L10N[locale][L10N_LOCAL], + config_url_prefix, L10N[locale][L10N_FEDERATED], + config_url_prefix, L10N[locale][L10N_NOTIFICATIONS], + config_url_prefix, L10N[locale][L10N_LISTS], + config_url_prefix, L10N[locale][L10N_DIRECT], + config_url_prefix, L10N[locale][L10N_CONFIG], page->content); diff --git a/src/l10n.h b/src/l10n.h index 200e499..137039f 100644 --- a/src/l10n.h +++ b/src/l10n.h @@ -53,6 +53,14 @@ enum l10n_string L10N_LIGHT, L10N_DARK, L10N_SAVE, + + /* STATUS */ + L10N_REPLY, + L10N_REPEAT, + L10N_LIKE, + L10N_QUICK, + L10N_VIEW, + _L10N_LEN, }; @@ -85,6 +93,13 @@ static const char* const L10N[][_L10N_LEN] = { "Light", "Dark", "Save", + + /* STATUS */ + "Reply", + "Repeat", + "Like", + "Quick", + "View" }, // ES_ES @@ -115,6 +130,13 @@ static const char* const L10N[][_L10N_LEN] = { "Claro", "Oscuro", "Guardar", + + /* STATUS */ + "Respuesta", + "Impulso", + "Me gusta", + "Rápido", + "View (Untranslated)" }, }; diff --git a/src/status.c b/src/status.c index aefa5de..de2e40e 100644 --- a/src/status.c +++ b/src/status.c @@ -23,6 +23,7 @@ #include "easprintf.h" #include "query.h" #include "cookie.h" +#include "../config.h" #include "../static/status.chtml" int try_post_status(mastodont_t* api) @@ -80,12 +81,22 @@ char* construct_status(struct mstdnt_status* status, int* size) size_t s = easprintf(&stat_html, data_status_html, status->account.avatar, status->account.display_name, /* Username */ + config_url_prefix, + status->account.acct, + status->account.acct, /* Account */ "Public", /* visibility */ status->content, + config_url_prefix, + status->id, + config_url_prefix, + status->id, status->reblogged ? "nobutton-active" : "", + config_url_prefix, status->id, status->favourited ? "nobutton-active" : "", + config_url_prefix, + status->id, status->id); if (size) *size = s; return stat_html; diff --git a/static/config.html b/static/config.html index f746c5f..25bee32 100644 --- a/static/config.html +++ b/static/config.html @@ -1,4 +1,4 @@ -
+

General

JavaScript

diff --git a/static/index.html b/static/index.html index f81f732..b8a9711 100644 --- a/static/index.html +++ b/static/index.html @@ -4,6 +4,7 @@ %s + @@ -11,12 +12,12 @@