created: 2024-11-07 05:34 tags: - daily-notes

Thursday, November 07, 2024

<< Timestamps/2024/11-November/2024-11-06-Wednesday|Yesterday | Timestamps/2024/11-November/2024-11-08-Friday|Tomorrow >>

🎯 Goal

• [x] Resolve Issue 27 - Fix header positioning on Mobile.

🌟 Results

• Fixed/closed some issues:
  • https://github.com/williamrhayes/dimmin/issues/2
  • https://github.com/williamrhayes/dimmin/issues/3
  • https://github.com/williamrhayes/dimmin/issues/5
  • https://github.com/williamrhayes/dimmin/issues/18
  • https://github.com/williamrhayes/dimmin/issues/27
• Identified a new issue with the site where the footers of the BlogPostDetails aren't aligned properly

🌱 Next Time

• fix the password reset issue (my arch nemesis)

📝 Notes

I created a new Git Branch via GitHub to resolve Issue 27.

First I needed to save the changes I already made to hithub-champions-animation

git add .
git commit -m "..."

Then I switched back to my staging branch and got a fresh pull from that branch via

git checkout staging
git pull

and checked out a new branch locally via

git checkout -b 27-fix-header-positioning-on-mobile

I updated the CSS using ChatGPT to the following:

/*------------------------------------------------------------------
[2. Header ] 
*/
.header {
  margin-top: 0;
  padding-top: 30px;
  padding-bottom: 30px;
  border: none;
}
.header__logo {
  margin-right: -5px;
  margin-left: -5px;
  margin-bottom: 30px;
  text-align: center;
}
.header__right {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
@media (max-width: 991px) {
  .header {
    padding-top: 0;
    padding-bottom: 10px;
  }
  .header__logo {
    position: relative;
    margin-bottom: 0;
    display: flex;
    flex-direction: column; /* Stack items vertically */
    align-items: center;
  }
  .header__right {
    position: static; /* Prevent overlap */
    order: -1; /* Display above the logo */
    width: 100%; /* Full width for better alignment */
    justify-content: center;
    margin-bottom: 10px;
  }
  .top-icons {
    display: flex;
    justify-content: center; /* Center-align icons */
  }
}
/*------------------------------------------------------------------
[3. Logo ] 
*/
.logo h1 {
  margin-top: 0;
  margin-bottom: 5px;
}
.logo p {
  margin-bottom: 5px;
  font-weight: 500;
  line-height: 1.1;
}
.logo__link {
  font-size: 48px;
  font-weight: 400;
  color: #262626;
  text-decoration: none;
  transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
}
.logo__link:hover {
  color: #262626;
  text-decoration: none;
  opacity: 0.8;
}
.logo__description {
  font-size: 14px;
}
@media (max-width: 991px) {
  .logo {
    margin-bottom: 10px;
  }
  .logo__link {
    font-size: 36px;
  }
  .logo__description {
    font-size: 12px;
  }
}

Which helps me reposition my site to look like the following on mobile:

--redacted--

now if they have a really long username I can't really help there, but this is a massive improvement over what I had originally. I finished up this feature improvement and pushed changes via

git add .
git commit -m "Resolved issue..."
git push origin 27-fix-header-positioning-on-mobile

Then I finished up my changes and pushed results to Heroku via the Heroku CLI with

git checkout master
git pull origin master
git push heroku master

And the header issue was fixed in Production:

--redacted--

Merging is still confusing. I did notice that my master Git Branch is currently the default branch, though I'd like that to be staging. Also for some reason it didn't tie my branch directly to the issue, maybe because I didn't actually create the branch on the GitHub platform... Yup I didn't actually hit the "Create Branch" button. Whoops.

It turns out I made the same issue like 4 times. I closed some redundant issues there and started focusing on the embarrasing issues. One of the main things I'll need to do soon is work on error pages for 400 Errors. First I wanted to fix some other quick issues. Mainly:

• Fix DIMMiN Header
  • Fixed in about 10 seconds
• Prevent Non-Admin Access to Inactive Posts
  • Need to update BlogDetailView in blog/views.py so that users that aren't admins can't even access inactive posts.
  • ChatGPT helped me fix this one up using Django's built in exceptions:
    • from django.core.exceptions import PermissionDenied

The most embarrassing feature that I really need to fix is password reset issue, so I'll work on that one tomorrow.

After work I decided to implement the silouhettes for the HitHub App reference / HitHub champions, closing out the hithub-champions-animation Git Branch: --redacted--

Notes created today

List FROM "" WHERE file.cday = date("2024-11-07") SORT file.ctime asc

Notes last touched today

List FROM "" WHERE file.mday = date("2024-11-07") SORT file.mtime asc

(Template referenced from Dann Berg, can be found here)