efryndiel | [ code ] cr chart cards with affection bars

cr cards with affection bars

Cidolfus Telamon

» » » ramuhs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus mattis elementum elit, ut tempor nisl accumsan ac. Ut est libero, commodo at cursus in, ultricies mattis massa. In hac habitasse platea dictumst. Cras facilisis tellus mauris, sit amet lacinia urna maximus condimentum. Pellentesque sit amet ipsum at tellus facilisis condimentum. In pellentesque nibh eget imperdiet facilisis. Nam sed purus vestibulum, posuere quam et, iaculis felis.

AFFECTION

TRUST

SUPPORT

STRENGTH

Eustace

» » » flamekthunder

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus mattis elementum elit, ut tempor nisl accumsan ac. Ut est libero, commodo at cursus in, ultricies mattis massa.

AFFECTION

TRUST

SUPPORT

STRENGTH

Aranea Highwind

» » » draganea

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

AFFECTION

TRUST

SUPPORT

STRENGTH

Dropped

Rokurou Rangetsu

» » » rokubro

AFFECTION

TRUST

SUPPORT

STRENGTH

Shizuo Heiwajima

» » » hatesviolence

AFFECTION

TRUST

SUPPORT

STRENGTH

about
This is a re-coded and scripted version of an old code I had that got killed in that old DW code push and I just never got around to fixing it until someone made the request for it! Since it was pretty easy to script I went ahead and did it lol. Although the little tracker code there is up to date, I am thinking about scripting it later, but we'll see!

A small credit code is included, but any credit goes to

laenavesse @

efryndiel. Although not necessary, I do accept tips on ko-fi! I can also do script commissions for other codes!

raw code instructions
Here is the Pastebin for the raw code. You can save or c/p the code and edit it as you see fit:
» CR Chart

» The colors in this code are:

#f4f3ef: background color, second bar color
#c2baa0: border color
#d5d5d5: box shadow color
#423e31: character name color
#999999: character name shadow color
#5b5748: journal name color
#2b250f: main text color
#423e31: bar text color
#d4ccb5: main bar and bar border color

» Even though the template uses JOURNALS for the subheader, you could change it to be the character's canon, fun title, or whatever you want.
» The DROPPED characters section is coded to be collapsible, with the <details> tag set on the default close. If you want to have the section open all the time, change the tag to <details open>.
» You can add or remove the bars to be whatever you want, the card will grow to accommodate the height.
» Because I use linear-gradient for the bar, this is how you edit it: change the percentages of both colors to be the same. For example, if the bar should be 25%, the code will look like this:

linear-gradient(90deg, #d4ccb5 25%, #f4f3ef 25%)

Technical explanation is the first color is the advancing bar color, and the second color is the bar's background color. The first color will stop at 25%, and the second color will start right where the first color stops.

» For mobile users: if you want the text to scale properly on both desktop and mobile (especially mobile Chrome users), you'll need to change the font-size for both the CHARACTER NAME and the JOURNALNAME to the following for best results:

CHARACTER NAME: font-size: clamp(0.875rem, 0.61rem + 1.324vi, 1.438rem);

JOURNALNAME: font-size: clamp(0.75rem, 0.603rem + 0.735vi, 1.063rem);

The text will be a lot smaller on mobile view, but it won't stretch out as much. If you want to adjust, use a generator like this Font-Size Clamp generator. Here are the settings I used to help! Note: This issue is worse with Chrome; on Firefox and Vivaldi they scale better with the default sizes.

For those using the spreadsheet, you can input the clamp() formula into the cell for the font size and it will work.

» Use <br /> tags for line breaks!

spreadsheet script and instructions
Google Spreadsheets allows the user to create app scripts, and with this tool it can take the data in the sheet and generate the code. This makes things like cr charts much more manageable to maintain, and here are some other highlights featured with this sheet and script:

Just add columns to the end of the given template for more bars.
Like written in the raw code instructions, the second column is labeled for JOURNALS, but you can put whatever you want and even rename the column for organization purposes.
Toggle feature for the Dropped Characters section to be included and whether it starts open or closed.

Here is the spreadsheet. To save, Make a Copy of it for your own use:

»» CR Chart with Affection Bars

It does dump the code out as a giant blob, so use something like HTML Formatter if you want something neater (it has no affect on the code itself).

It's already "pre-filled" with random data so you can see how it works. Detailed instructions are included on how to do practically everything you could possibly do with the code with minimum risk. But if you have any questions or need help with modifications, just comment and I'll take a poke, even customize it for you if possible. However, I am not a professional, so my own abilities are limited.

Flat | Top-Level Comments Only

Love the code! Can’t wait to use it myself once I fill it all out. I was wondering if maybe it’s because I’m on mobile, but I noticed that if the name isn’t long enough, it cuts off the journal name and makes the boxes smaller. It worked fine for one character but not for the other two.

Is there anything I can do in the code to fix this?

Examples are here both from the preview above and what I’ve done in my personal journal.

Hopefully I explained it right! If you have any questions let me know.

I had to look at this on my phone again because I SWEAR I TESTED IT ON ALL BROWSERS and I see it's Chrome. Of course it's Chrome lmljasdf.

SO after fiddling around and trying to see what was going on, Chrome is fun in that the actual default size of every container is way smaller than everything else. Here's how it looks on my Chrome compared to Firefox. You can see my attempts at changing the font sizes, but the "ramuhs" one is the original lmfao. So Chrome is already starting with a super small size and it will push out as far as it can to fit the text (like on the top).

The quick fix to make it fit both browser and mobile would be to change the font sizes for both the character name and the journal name using something like this:

And you can fiddle with the values. It'll make them veerry small on mobile view like this, but better than it looking so super huge like that ahahha.

There might be a better way, but this should at least work for now!

That helps! It was bothering me so bad that the boxes weren’t the same size. Thank you so much! I’ll keep playing with the values as I tweak things here and there.

Thank you again to making this code!

Great code, thank you for sharing!

[ code ] cr chart cards with affection bars

no subject

no subject

no subject

no subject