gitbutlerapp/gitbutler
1
1
Fork 0
mirror of https://github.com/gitbutlerapp/gitbutler.git synced 2024-11-24 05:29:51 +03:00
Code Issues Packages Projects Releases Wiki Activity

Refactor scrollbar CSS and improve form layout

Browse Source 
This commit refactors the CSS for the scrollbar by removing unnecessary margin and padding properties, and changing the background color to increase contrast for better usability. The form layout in the commit page of the Svelte app is also optimized by adjusting the input and textarea elements' styling and alignment to improve overall readability and consistency.

Changes:
- Update scrollbar width and height properties
- Change scrollbar background color to rgba(255, 255, 255, 0.2)
- Remove padding and width properties from ::-webkit-scrollbar-thumb
- Adjust layout of input and textarea elements in commit page
- Improve alignment and truncation of file paths in commit file list
This commit is contained in:
Ian Donahue 2023-03-28 11:40:04 +02:00
parent dbc04ed0fe
commit c167eef29c
2 changed files with 10 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/app.postcss
View File

@ -15,8 +15,7 @@
/* width */
::-webkit-scrollbar {
width: 8px;
margin-right: 2px;
padding-right: 2px;
height: 8px;
}
/* Track */
@ -26,10 +25,9 @@
/* Handle */
::-webkit-scrollbar-thumb {
background: #44444A;
/* background: #44444A; */
background: rgba(255, 255, 255, 0.2);
border-radius: 10px;
padding-right: 2px;
width: 8px;
}
/* Handle on hover */

13
src/routes/projects/[projectId]/commit/+page.svelte
View File

@ -200,20 +200,21 @@
<a href="#" class="text-yellow-200" on:click={toggleAllOn}>all</a>
<a href="#" class="text-yellow-200" on:click={toggleAllOff}>none</a>
</div>
<ul class="w-80 truncate px-2 pb-2">
<ul class="truncate px-2 pb-2">
{#each $filesStatus as activity}
<li class="list-none text-zinc-300">
<div class="flex flex-row space-x-2">
<div class="flex flex-row align-middle">
<input
type="checkbox"
on:click={showMessage}
bind:group={filesSelectedForCommit}
value={activity.path}
class="w-4 mr-2 mt-1"
/>
<div>{activity.status.slice(0, 1)}</div>
<div class="w-4">{activity.status.slice(0, 1)}</div>
<!-- svelte-ignore a11y-click-events-have-key-events -->
<div
class="cursor-pointer {currentPath == activity.path ? 'text-white' : ''}"
class="w-[100%] truncate cursor-pointer {currentPath == activity.path ? 'text-white' : ''}"
on:click={selectPath(activity.path)}
use:collapsable={{ value: activity.path, separator: '/' }}
/>
@ -231,14 +232,14 @@
name="subject"
bind:value={commitSubject}
placeholder={placeholderSubject}
class="mb-2 block w-full rounded-md border-zinc-600 bg-zinc-700 p-4 text-zinc-200 ring-1 ring-inset ring-gray-600 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:py-1.5 sm:text-sm sm:leading-6"
class="mb-2 block w-full rounded-md border-zinc-600 bg-zinc-700 p-4 text-zinc-200 ring-1 ring-inset ring-gray-600 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:py-3 sm:text-sm sm:leading-4"
/>
<textarea
rows={messageRows}
name="message"
placeholder={placeholderMessage}
bind:value={commitMessage}
class="mb-2 block w-full rounded-md border-zinc-600 bg-zinc-700 p-4 text-zinc-200 ring-1 ring-inset ring-gray-600 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:py-1.5 sm:text-sm sm:leading-6"
class="mb-2 block w-full rounded-md border-zinc-600 bg-zinc-700 p-4 text-zinc-200 ring-1 ring-inset ring-gray-600 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:py-3 sm:text-sm sm:leading-4"
/>
</div>