raggedstaff/openfoodnetwork
1
0
Fork 0
mirror of https://github.com/openfoodfoundation/openfoodnetwork synced 2026-01-27 21:06:49 +00:00
Code Issues Packages Projects Releases Wiki Activity
28,175 Commits 18 Branches 451 Tags
276b94de5bd7bb971c25b4f64e6acda0b5691391
Commit Graph

49 Commits

Author SHA1 Message Date
Jean-Baptiste Bellet
352cf2ff71 Import typography.scss for admin_v3 
And do not apply `a` style to `.button` element.

ie.
```
a:not(.button)
```
 2023-07-25 14:29:00 +02:00
Jean-Baptiste Bellet
b42dfb574b Delete already imported (and modified) file 2023-07-19 14:58:40 +02:00
Jean-Baptiste Bellet
010f19cb83 Create a medium height button, and adjust #sort row 2023-07-19 14:58:39 +02:00
Jean-Baptiste Bellet
5a8a187f54 Add clear search button and action 2023-07-19 14:58:39 +02:00
Jean-Baptiste Bellet
904c7bfacf Buttons design 
Remove already defined `$border-radius`

Defined `app/webpacker/css/admin/globals/variables.scss`

Adjust height
 2023-07-19 14:58:39 +02:00
Jean-Baptiste Bellet
9d52f0b20a Loading spinner should be above content (filters, sort, ...) 2023-07-19 14:58:39 +02:00
Jean-Baptiste Bellet
643897abb2 Add search functionnality 2023-07-19 14:58:39 +02:00
Jean-Baptiste Bellet
47f21cb59e Add pagination with pagy 
For `admin_style_v3` use `<` and `>` for next and previous link

instead of `next` and `previous` string

Extract a mixin for a default box-shadow

Maybe this needs to be redefined. Let's see how next things goes.

When a table is followed by a pagination, remove its margin-bottom + border

Finally, design the pagination component

Add sorting/pagination module, on top of table

We use `cablea_ready.replace`, so need to add `#products-content` id

Use a `pagy` partial with reflex action, instead of the legacy one

- revert the legacy one to its previous state
 - in reflex, fetch product with page attribute, 1 by default

Move `pagy` into `admin/shared/v3/` to be reusable

+ use fontawesome icons for next and previous page

Remove useless line
 2023-07-19 14:58:39 +02:00
Jean-Baptiste Bellet
69cff85577 Change color to EFF1F2 2023-07-19 14:58:39 +02:00
Jean-Baptiste Bellet
9b92c25879 Add a section for specific rules for both admin-menu and sub-menu 
+ change height for border bottom on selected/hovered menu
 2023-07-19 14:58:39 +02:00
Jean-Baptiste Bellet
9762819aa8 Use the right color 2023-07-19 14:58:39 +02:00
Jean-Baptiste Bellet
1f3d41972f Add same padding than #admin-menu,#sub-menu li a in order to align 
content (header, navigation, content) on both left and right
 2023-07-19 14:58:39 +02:00
Jean-Baptiste Bellet
2892301336 Factorize menu and submenu into same definition 
as they are the same, expect the font-size
 2023-07-19 14:58:39 +02:00
Jean-Baptiste Bellet
24c045a09c Reduce padding 2023-07-19 14:58:39 +02:00
Jean-Baptiste Bellet
a8088ae231 Create a pseudo element to add a line under the menu item 
- Increase top menu underline height to 3px
 - reduce underline width to same width of label
 2023-07-19 14:58:39 +02:00
David Cook
f280881126 Style tables with relaxed and condensed rows 
* attempt with shadows, but they are between every row: http://jsfiddle.net/d872e3nb/
 * another attempt at applying styles to tbody groups http://jsfiddle.net/sb38cLdu/
 2023-06-28 09:59:57 +10:00
David Cook
9c573f823a Move .content under main content div 
The .content div provides overall page margins and a max width, and is already nested inside the nav menus (this allows the nav background to fill the full width of the page.
The main content area should be structured the same way, so we can have flexibility needed to allow some screens to use the full page.

This doesn't seem to change the layout of any screens in the admin interface.

Now the table content can stretch full width
 2023-06-28 09:59:57 +10:00
David Cook
6a2025b271 Add products table 
With ellipsis clipping for long lines.
 2023-06-28 09:59:57 +10:00
David Cook
809c15b197 Load products page with reflex 
We will add the products in the next commit.
 2023-06-28 09:59:57 +10:00
David Cook
efcaab5deb Rename colour variables 2023-06-28 09:59:57 +10:00
David Cook
e4c65ea87d Prettify palette file 2023-06-13 11:46:28 +10:00
David Cook
f007cf3dad Fix up table borders 2023-06-13 11:45:39 +10:00
David Cook
edcdcd3f74 Use header colour for table headers 2023-06-13 11:45:39 +10:00
David Cook
16534319b6 Replace dark blue with "Sherpa blue" 
It looks like it’s used in headers, some buttons and a loading message
 2023-06-13 11:45:39 +10:00
David Cook
d85ea628e2 Change default font colour to near-black 
It looks like this is the main font colour in the new designs.
 2023-06-13 11:45:39 +10:00
David Cook
821446e150 Style pagination links 
And provide a basic hover state for most other buttons.
The pagination button hover and active states will need updating.

The darker background colour sometimes wraps a whole table (eg products table).
 2023-06-13 11:45:39 +10:00
David Cook
744f95809a Remove uppercase styling of form elements 2023-06-13 11:45:39 +10:00
David Cook
fb17a679c0 First pass at new table colours 
There is more to do, for example the dropshadows.

I've continued with the unopinionated colour naming (eg color-7), but would like to consider giving them more meaningfule names..
 2023-06-13 11:45:39 +10:00
David Cook
3967f54533 Use different variables and table styles for admin_v3 2023-06-13 11:44:48 +10:00
David Cook
e2ba18f828 Set sentence case tab names in Ruby instead of CSS 
I chose .capitalize instead of .humanize, because the latter has extra features which may not be desired.
 2023-06-08 11:24:44 +02:00
Jean-Baptiste Bellet
d6cb483f0d Adjust color to the title of the page 2023-06-08 11:24:44 +02:00
Jean-Baptiste Bellet
d7f7ff7436 Remove background, border and adjust margin top 2023-06-08 11:24:44 +02:00
Jean-Baptiste Bellet
905220a055 Add new color: $color-8 #191c1d Near-black 2023-06-08 11:24:44 +02:00
Jean-Baptiste Bellet
b865d8c1c0 Copy/Paste file admin/shared/layout under admin_v3 folder 
+ prettier
 2023-06-08 11:24:44 +02:00
Jean-Baptiste Bellet
51f47fc351 Add border bottom when hovering or selected 
+ add some padding to separate those borders then
 2023-06-08 11:24:44 +02:00
Jean-Baptiste Bellet
1b4236640d Add border with box-shadow to menu and sub-menu 2023-06-08 11:24:44 +02:00
Jean-Baptiste Bellet
2057449dac Add new color: $color-7 #EFF1F2 Light grey 2023-06-08 11:24:44 +02:00
Jean-Baptiste Bellet
ba98039e95 Adjust color to orange when selected or hover 2023-06-08 11:24:44 +02:00
Jean-Baptiste Bellet
d51786ac9e Adjust font size for labels in menu 2023-06-08 11:24:44 +02:00
Jean-Baptiste Bellet
ccd7466ede No more white on labels but dark grey 2023-06-08 11:24:44 +02:00
Jean-Baptiste Bellet
b163d4a584 Remove background-color on menu 2023-06-08 11:24:44 +02:00
Jean-Baptiste Bellet
a4d3011e27 Add new color: $color-9 #2E3132 Dark Grey 2023-06-08 11:24:44 +02:00
Jean-Baptiste Bellet
dd48092728 Prettier file 2023-06-08 11:24:44 +02:00
Jean-Baptiste Bellet
5ee3550ebd Change case to Sentence case 
CSS property `capitalize` uppercase all first letter of each words.

I need to use a small trick with `::first-letter` selector
 2023-06-08 11:24:44 +02:00
Jean-Baptiste Bellet
eab46b67e3 Copy/Paste file admin/components/navigation under admin_v3 folder 
+ prettier
 2023-06-08 11:24:44 +02:00
David Cook
e674c53535 Change error red color to Mojo 
color-5 is used for error messages.
 2023-05-26 15:11:23 +10:00
David Cook
719a704985 Change blue colour as per design 
https://github.com/openfoodfoundation/openfoodnetwork/issues/10630#issue-1644928392
 2023-05-26 15:11:23 +10:00
David Cook
e928e74ae6 Use different palette for admin styles v3 
Note that mail.css is still referring to the old palette.
 2023-05-26 15:10:49 +10:00
David Cook
01b3901b08 Add admin_style_v3 
Individual files may be copied in order to replace the old files.

NOTE: these may need manually re-syncing. If any of the copied files have changed on master in the meantime, we'll need to manaully review to consider bringing those changes to the new design.
 2023-05-26 15:10:27 +10:00