ro/ForRo
1
0
Fork 0
forked from projects/thebadspace
Code Pull requests Activity
ForRo/public/assets/css/front/listing.css

156 lines
2.7 KiB
CSS
Raw Normal View History

Front End Templating Began the process of getting the front end together by adding about and listing pages and applied some light styling to it doesn't look like garbage. Still need to turn on the indivial instance display pages, so that will be next.
2023-01-13 00:43:54 +01:00
section[role="listings"] {
background: var(--primary);
width: 100%;
max-width: 600px;
Added Front listings and member editing Added the template for to display locations on the front end. Still need to add template for individual locations. Also added member editing. Still need to wire up the avatar uploading but adding and editing member information is possible. Still need to fine tune it according to roles
2023-01-17 05:17:22 +01:00
padding: 10px;
Front End Templating Began the process of getting the front end together by adding about and listing pages and applied some light styling to it doesn't look like garbage. Still need to turn on the indivial instance display pages, so that will be next.
2023-01-13 00:43:54 +01:00
margin: 0 auto;
color: var(--white);
}
section[role="listings"] a {
color: var(--highlight);
Added support of fedifence CSV and pagination Populated the DB with entries from a fedifence export provided by @Oliphant (https://codeberg.org/oliphant/blocklists). As such also updated the appropriate templates with pagination to be able to peruse through the location directory. Also added an edit link on the location template front end to make finding and updating instance info easy.
2023-01-24 04:59:51 +01:00
font-size: 2em;
Front end clean up continued Cleaned up the front end structure a bit more so the layout is unified across pages, excluding the index which will serve as the main search page, which has it's own style. Location page was also added to display details of instances listed in the database. It's mostly just informational so it will be kept simple.
2023-01-22 23:03:45 +01:00
font-weight: bold;
border: 0;
Front End Templating Began the process of getting the front end together by adding about and listing pages and applied some light styling to it doesn't look like garbage. Still need to turn on the indivial instance display pages, so that will be next.
2023-01-13 00:43:54 +01:00
}
Added support of fedifence CSV and pagination Populated the DB with entries from a fedifence export provided by @Oliphant (https://codeberg.org/oliphant/blocklists). As such also updated the appropriate templates with pagination to be able to peruse through the location directory. Also added an edit link on the location template front end to make finding and updating instance info easy.
2023-01-24 04:59:51 +01:00
section[role="listings"] a label {
color: var(--secondary);
font-size: 0.3em;
text-decoration: underline;
font-family: var(--mono-type);
}
section[role="listings"] a:hover {
color: var(--white);
}
Listing style tweaks Cleaned up pagination to make it easier to identify what page is currently being displayed and tweaks font sizes of page links for better legibility.
2023-02-09 21:34:51 +01:00
section[role="listings"] div[role="paginate"] {
padding: 5px;
}
section[role="listings"] div[role="paginate"] span {
vertical-align: super;
font-weight: bold;
font-size: 1.5em;
}
Added Trusted Sources Count, added meta to links Plugged in noted counts that detail how many times an instance as been suspended or silenced by members of the Trusted Sources. https://writer.oliphant.social/oliphant/trusted-source-membership Also added some additional meta data to links displaying instances lists so status and counts can be identified at a glance
2023-08-29 03:01:43 +02:00
a.list-link {
display: grid;
Messaging infrastructure Put together a quick test to get internal messaging working for appeals and joining current sources requests. Now that it works, forms that will leverage messaging will be created.
2024-02-02 19:16:11 +01:00
grid-template-columns: 70px 1fr 80px 80px;
Link Updates, Recent Links on Index clean up Started the front end refresh by starting to plug in the new design on the index page. The search methodology was still not consistent, so that process was cleaned up to display what is actually being tracked based on the two action criteria, then updating the design for the location links to be clear and display the heat rating. Added a repo link to the About section.
2024-01-22 20:45:11 +01:00
gap: 10px;
Responsive Part 2, environment changes Hit the major friction points in the responsive UI. Still have some polishing to do but there shouldn't be any show stoppers at this points. Also moved some variable to the env so they can be changed easily when necessary
2024-02-08 20:07:49 +01:00
height: auto;
Link Updates, Recent Links on Index clean up Started the front end refresh by starting to plug in the new design on the index page. The search methodology was still not consistent, so that process was cleaned up to display what is actually being tracked based on the two action criteria, then updating the design for the location links to be clear and display the heat rating. Added a repo link to the About section.
2024-01-22 20:45:11 +01:00
padding-bottom: 20px;
Updated search and listing links, added new icons Search methodolgy has been tweaked and the correspending result links have been updated, as well as links in the Listing page to display both silence and suspend counts and the overall heat rating. Also plugged in new silence and suspend icons provideb by https://rage.love/@puf. Big thanks for that, man.
2024-01-23 19:04:52 +01:00
cursor: pointer;
Link Updates, Recent Links on Index clean up Started the front end refresh by starting to plug in the new design on the index page. The search methodology was still not consistent, so that process was cleaned up to display what is actually being tracked based on the two action criteria, then updating the design for the location links to be clear and display the heat rating. Added a repo link to the About section.
2024-01-22 20:45:11 +01:00
}
a.list-link > .item-rating {
background: var(--secondary);
border-radius: 3px;
color: var(--white);
font-weight: 500;
padding: 10px;
Responsive Edits: Part 1 Responsive styles are non-existent so it was time to get that sorted. This first pass was just getting a feel for what can be done with list items since that's one of the main components of the site. Second pass will clean this up as well as the majority of text styling so it all smoothly adapts. Ha, or that's the plan anyway.
2024-02-06 22:39:19 +01:00
position: relative;
Link Updates, Recent Links on Index clean up Started the front end refresh by starting to plug in the new design on the index page. The search methodology was still not consistent, so that process was cleaned up to display what is actually being tracked based on the two action criteria, then updating the design for the location links to be clear and display the heat rating. Added a repo link to the About section.
2024-01-22 20:45:11 +01:00
}
a.list-link > .item-name {
background: var(--white);
border-radius: 3px;
color: var(--black);
font-weight: 400;
padding: 9px 5px;
Updated search and listing links, added new icons Search methodolgy has been tweaked and the correspending result links have been updated, as well as links in the Listing page to display both silence and suspend counts and the overall heat rating. Also plugged in new silence and suspend icons provideb by https://rage.love/@puf. Big thanks for that, man.
2024-01-23 19:04:52 +01:00
cursor: pointer;
Responsive Edits: Part 1 Responsive styles are non-existent so it was time to get that sorted. This first pass was just getting a feel for what can be done with list items since that's one of the main components of the site. Second pass will clean this up as well as the majority of text styling so it all smoothly adapts. Ha, or that's the plan anyway.
2024-02-06 22:39:19 +01:00
position: relative;
Link Updates, Recent Links on Index clean up Started the front end refresh by starting to plug in the new design on the index page. The search methodology was still not consistent, so that process was cleaned up to display what is actually being tracked based on the two action criteria, then updating the design for the location links to be clear and display the heat rating. Added a repo link to the About section.
2024-01-22 20:45:11 +01:00
}
a.list-link > .item-silence {
background: var(--silence);
border-radius: 3px;
color: var(--black);
font-weight: 500;
padding: 10px;
Responsive Edits: Part 1 Responsive styles are non-existent so it was time to get that sorted. This first pass was just getting a feel for what can be done with list items since that's one of the main components of the site. Second pass will clean this up as well as the majority of text styling so it all smoothly adapts. Ha, or that's the plan anyway.
2024-02-06 22:39:19 +01:00
position: relative;
Link Updates, Recent Links on Index clean up Started the front end refresh by starting to plug in the new design on the index page. The search methodology was still not consistent, so that process was cleaned up to display what is actually being tracked based on the two action criteria, then updating the design for the location links to be clear and display the heat rating. Added a repo link to the About section.
2024-01-22 20:45:11 +01:00
}
a.list-link > .item-block {
background: var(--suspend);
border-radius: 3px;
color: var(--black);
font-weight: 500;
padding: 10px;
Responsive Edits: Part 1 Responsive styles are non-existent so it was time to get that sorted. This first pass was just getting a feel for what can be done with list items since that's one of the main components of the site. Second pass will clean this up as well as the majority of text styling so it all smoothly adapts. Ha, or that's the plan anyway.
2024-02-06 22:39:19 +01:00
position: relative;
Link Updates, Recent Links on Index clean up Started the front end refresh by starting to plug in the new design on the index page. The search methodology was still not consistent, so that process was cleaned up to display what is actually being tracked based on the two action criteria, then updating the design for the location links to be clear and display the heat rating. Added a repo link to the About section.
2024-01-22 20:45:11 +01:00
}
a.list-link > .item-silence > .item-icon,
a.list-link > .item-block > .item-icon {
width: 30px;
vertical-align: top;
Added Trusted Sources Count, added meta to links Plugged in noted counts that detail how many times an instance as been suspended or silenced by members of the Trusted Sources. https://writer.oliphant.social/oliphant/trusted-source-membership Also added some additional meta data to links displaying instances lists so status and counts can be identified at a glance
2023-08-29 03:01:43 +02:00
}
Responsive Edits: Part 1 Responsive styles are non-existent so it was time to get that sorted. This first pass was just getting a feel for what can be done with list items since that's one of the main components of the site. Second pass will clean this up as well as the majority of text styling so it all smoothly adapts. Ha, or that's the plan anyway.
2024-02-06 22:39:19 +01:00
/*
responsive
*/
@media only screen and (max-width: 800px) {
a.list-link {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: 100% 100px 30px 30px;
gap: 5px;
height: auto;
padding-bottom: 20px;
cursor: pointer;
}
a.list-link > .item-rating {
grid-row: 3;
grid-column: 1/4;
height: 100%;
}
a.list-link > .item-name {
grid-row: 2/3;
grid-column: 1/6;
}
a.list-link > .item-silence {
grid-row: 3/4;
height: 100%;
}
a.list-link > .item-block {
grid-row: 3/4;
height: 100%;
}
}
Responsive Part 2, environment changes Hit the major friction points in the responsive UI. Still have some polishing to do but there shouldn't be any show stoppers at this points. Also moved some variable to the env so they can be changed easily when necessary
2024-02-08 20:07:49 +01:00
@media only screen and (max-width: 480px) {
a.list-link {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: 100% auto 30px 30px;
gap: 5px;
height: auto;
padding-bottom: 20px;
cursor: pointer;
}
a.list-link > .item-rating {
grid-row: 3;
grid-column: 1/2;
height: 100%;
}
a.list-link > .item-silence {
grid-row: 3/4;
grid-column: 2/4;
height: 100%;
}
a.list-link > .item-block {
grid-row: 3/4;
height: 100%;
grid-column: 4/6;
}
}
Copy permalink