Created a new layout for GitHub projects #2702
Conversation
Fixed layout issues for mobile phonesPreview
|
|
@george-gca kindly review this as well |
|
I know this was previously discussed, but this is the updated version. I am using this for my projects section and it felt like a waste for it to not be a feature. Next I am thinking about adding some default badges to include Light Mode
Dark Mode
the above are the ones for my GitHub stars Light Mode
Dark Mode
And these 2 are for installs on my VS extension I was thinking about adding a little bit more like these so that they can make them easily? or should they do this themselves? |
I believe they should add them themselves. I am not sure about the layout of the icons in the desktop version, but tbh I don't currently have a counter-proposal. Have you tested it in the description as smaller icons maybe? But I like the idea of this being a different layout available for the users. Can you create (or maybe modify) a project so it uses this layout, so it can be an example of usage? |
| {% if include.height %} | ||
| height="{{ include.height }}" | ||
| {% else %} | ||
| height="40" |
There was a problem hiding this comment.
I believe it is best to use rem whenever possible. This calculator can help.
| {% endif %} | ||
| > | ||
| {% if include.spaceAfter %} | ||
| <img width="{{ include.width }}"> |
| @@ -0,0 +1,27 @@ | |||
| {% assign addIcon = include.icon %} | |||
There was a problem hiding this comment.
Why not use include.icon directly in the code?
| {% if addIcon contains 'http' %} | ||
| src="{{ addIcon }}" | ||
| {% else %} | ||
| src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/{{ addIcon }}" |
There was a problem hiding this comment.
I have a suggestion: what about creating another input to icon.liquid, for example devicon, and then set a precedence order. For example, use devicon if defined, else use icon as the src. This way we could even add other possibilities. Maybe also add simple-icon as another parameter, which is the icon set used by shields.io.
| </div> | ||
| <p class="post-description">{{ page.description }}</p> | ||
| {% if page.repositories %} | ||
| <div class="repositories d-flex flex-wrap flex-md-row flex-column justify-content-between align-items-center"> |
There was a problem hiding this comment.
Maybe it would be nice to add a <hr /> before and after all the repositories, just to set it apart from the rest of the text.
Then should I center align the title and add the icons below it? Like in the mobile version? In my opinion it will make the description look awkward, it should be with the title but if we center align it, I don't think it will give a professional look |
|
I think the current desktop version doesn't look very professional, but the mobile one looks nice. I agree to not center align it in the desktop version. What about putting it after the description and before the repo card? |
That was how I did it initially but it looked like I was just dumping everything to the left side |
|
This is the new design I have come up with PC Version
Mobile Version
The icons and the repositories can be any number the user wills it to be The |
|
If the new design is better, should I add the description before or after the icons? Preview : Description before code icons
|
|
I am also thinking about adding a divider right before the repositories, it will keep it separated from the center-aligned content |
|
I am using the design on my website, you can take a look directly if you want to |
Preview
Additions