Skip to content

Cleaned up title in square #7

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
maxkele wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Cleaned up title in square #7

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
1c99dc0
Update Calender.vue
maxkele Oct 22, 2022
e3a49f8
tweak spacing
maxkele Oct 22, 2022
ac0a8a2
change display settings
maxkele Oct 22, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 25 additions & 1 deletion src/components/Calender.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,11 @@
<h3>
{{ calVal.date + 1 }}
</h3>

<p class="title">
{{ (filmExist(calVal.date)) ? listToDisplay.get(calVal.date)!.name : '' }}
</p>

<p
v-for="[username, filmList] in userFilmList.entries()"
:class="filmList.get(listToDisplay.get(calVal.date)?.name ?? '')?.toLowerCase() ?? ''"
Expand Down Expand Up @@ -118,7 +123,6 @@

padding: 0.22em 0.11em 0;
margin: 0;
margin-bottom: auto;
Copy link
Copy Markdown
Member

@qjack001 qjack001 Oct 22, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In flex layout, auto margin takes up all available space. You should at least add it back when the titles disappear to keep the usernames from clustering up at the top:

Screen Shot 2022-10-22 at 12 41 47 PM

border-radius: 100%;

line-height: 2ch;
Expand All @@ -133,6 +137,11 @@
background: var(--red);
}

.title
{
display: none;
}

p.user
{
font-family: var(--body-font);
Expand Down Expand Up @@ -174,6 +183,20 @@
hsl(0, 100%, 38%, 0.5));
}

@media (min-width: 1400px) {
Copy link
Copy Markdown
Member

@qjack001 qjack001 Oct 22, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If you flip this to max-width, you can move the styling to the main block, and move the display: none rule to the media query. This way you could re-add the margin-bottom: auto to the h3 at the same time.

Alternatively, if you want this to be a min-width rule, just remove the auto margin here, and leave it in the initial rule.

.title
{
display: block;
margin: 0 0.5ch auto 0.5ch;
max-width: max-content;

font-family: var(--body-font);
color: var(--black);
font-size: 1.25rem;
text-align: left;
}
}

@media (max-width: 975px)
{
#calender
Expand All @@ -185,6 +208,7 @@
{
font-size: 1.3rem;
transform: translate(-3px, -3px);
margin-bottom: auto;
Copy link
Copy Markdown
Member

@qjack001 qjack001 Oct 22, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah I see you do add it back in, but a little too late. These styles only kick in after 975px, while the titles disappear at 1400.

}

p.user
Expand Down