antaresproject / antares-front-end

:computer: Anatres Project Front-end Implementation. Create projects with clean material-design layouts, to improve user experience with fully responsive and elastic system. Object orientend javascript with Vue components, easy to use css grids, forms, widgets, build system based on Webpack and Grunt, and many more.

Antares Front-End

An open source package by Antares Project, code well, rock on!

Description

Open Source Laravel User Management Platform for standalone and SaaS applications. Based on Laravel, PHP7 ready, using flexible design patterns that keep the code clean and elegant.Speed up your work even up to 50% by using built-in workflow improvements.

Demo

You can preview front-end demo here: http://demo.antaresproject.io/frontend/.

Usage

Install using preferred dependency manager.

npm install

OR

yarn install

After that, you can init dev build, by typing

npm run dev

That will generate all others system assets.

You can preview the system on url http://localhost:9000/.

You can also use

npm run dev-build

for local file access, or

npm run prod

for generating minimized build.

Browsers support

IE / Edge	Firefox	Chrome	Safari	Opera
IE11, Edge	last 3 versions	last 3 versions	last version	last 3 versions

Services we're using

We're using BrowserStack for cross-browser testing!

antares-front-end's Issues

Layout > Navigation > Left > Thin

• Remove alt from menu links
  
  
  
• Pointing arrow has wrong color
  
  
• List elements in sub-nav has wrong font-color in list elements. Correct color: #b8becc
  
  
• List elements in sub-nav don't have color transition on :hover. It should have the same transition as main menu list elements.
  
  

Lack of selection by ctrl+shift on lists

There is possibility to select some records on lists, but only by dragging with mouse. There should be option to select records by ctr+shift to.

[Mobile] Email Settings - Email Template preview - isn't displayed

Preconditions:
device: Galaxy S4 - 360 x 640

"Email Settings" section - https://puu.sh/wpnzd/82d1091156.jpg

Dashboard icon is highlighted regardless of the open section

Steps:

1. Go to e.g. client list
2. Look at "Dashboard" icon on menu bar

Actual Results:

Dashboard icon is highlighted regardless of the open section

https://puu.sh/wjIoF/c7e9ffa1e3.jpg

'Brand Colors' - 'Default Settings' button

Maybe a good idea would be to add a button which reset the 'Brand Colors' settings to default.

Login page - logo needs improvement

On the login page, logo currently looks like this: https://puu.sh/wlI1g/7a1b086a3d.png

There should looks like: https://puu.sh/wlHPU/e5b3d9b394.png

or it should be alligned imho.

Page > Error

• All error pages 404, 400, 500 has wrong shade of main color in header
  
  

UI > Avatar

Avatars should always be rounded, even if we use square image.
Curretnly all images are as circles, and their container doesn't have border-radius and overflow: hidden. This need to be fixed.

[Mobile] "? - explanation inf" - isn't displayed

Brand Settings - https://puu.sh/wpn0t/eb64018bca.jpg

Page > Client Details

• Cards has wrong bottom margin, it shoudl be 8px

[Mobile] Lack of actions buttons on lists

Precondeitions:
device: Galaxy S4 - 360 x 640

1. Go to e.g. client list
2. Expand the options for random customer by arrow

Results:
Lack of actions button - https://puu.sh/wplBt/402a6da124.png

Layout > Navigation > Top

• Top nav should have full logo
• Top nav should have box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.15)

Dropdown

• 1. Wrong arrow color
• 2. Title is not needed

Search history list interfuse menu bar

Search history list from "Search" field interfuse menu bar - https://puu.sh/wlDZt/addec7791a.jpg

Resolution 1366x768 - invalid sections alignment

"Client details" section:

• 1. https://puu.sh/wof8n/dcf980663a.jpg

• 2. https://puu.sh/wofoU/eefc3045c7.jpg

"Email Settings" section:

• 1. https://puu.sh/wolg6/56245a1c46.jpg

Widget Edit Toggle bar is not displayed anywhere, except dashboard

Steps:

1. Go to e.g. to "Client list" or "ACL"
2. Click 'Widget Edit Toggle' button

Results:

https://puu.sh/wlEyv/ef5eb1f5fa.png

UI > Buttons

• Missing buttons with different statuses, like: danger, success, warning etc.
• Buttons with icons should have space between icon and text:
  
  
• default button has wrong color. Correct color: #dfe3e6
• disabled button should not have "ripple" effect

Page > Client Details

• Card "Clients Value" has wrong shade of main color in header.

• Card "Clients Value" don't have bottom shadow:
  
  

• Card "Clients Value" has wrong spacing:
  
  

• Card "Logs" uses old style of pagination.
  

• Avatar status scircle in card "Client Contacts" has wrong border color, when has status :hover
  
  

Widget Tabs

• Has wrong "Zero-Data" style

• I'm able to open "With Selected" dropdown, even when it's disabled:
  
  

• Main filter and search bar in all tabs should look like this:
  
  

• When I switch to the "Invoices", tabs container has unnecessary shadow:
  
  

• Has stronger shadow than other Cards.
  
  

• Pagination has wrong spacing
  
  

Layout > Secondary Navigation

• When navigation have more items, than we can fit in the screen height, we should display scroll, like in main navigation.

• When navigation is fixed, arrows has unnecessary shadow on them:
  
  

• Pointing arrow, of active menu element, has higher z-index, than dropdown:
  
  

Sub Nav

• 1. sub-nav items should not have icons,
• 2. sub-nav items should be aligned to it's parent text. Set up padding-left: 60px
• 3. Add 16px space, between sub-nav and separator
  
  

Forms Horizontal - Dev Area - no possibility to click checkboxes

There is no possibility to select checkboxes in "Checkbox & Radio Disabled" and "Checkbox & Radio Read-Only" sections.

Layout > Header

• Page name is cut off, even there is enough space, to show full page name.
  

Forms Vertical -> Date Range picker - there is no possibility to select date range

Steps:

1. Go to Forms Vertical - Dev Area
2. Try to select data range in Date Range picker field

Results:

There is no possibility to select date range

Page > Client List

• Search bar has unnecessary space:
  
  
  
  
• Cells are incorrectly aligned
  
  
  
• Pagination on mobiles, should have similiar layout to example below:
  
  

Incorrect 'Dashboard' dropdown display in "Steps Page"

Steps:

1. Go to Pages -> Steps Page
2. Click on "Dashboard" drop down

Results:

https://puu.sh/wlMYU/462fa64313.jpg

Empty list when 'All' filter is changed and then switched back to 'All'

Steps:

1. Go to "Client List" (There must be created records on list)
2. Change "All" filter to any other random filter
3. Set back to "All" filter

Actual Results:

The list is empty despite switched back to "All" filter

UI > Forms > Date Picker

• 1. "Apply" and "Clear" should be aligned to the left

• 2. "Cancel" should have default color

• 3. "Clear" button should have default color

• 4. This section should be on left side, and have right border

• 5. This section should have bigger inner padding.
  
  
  
  Project:
  
  

• Scroll should be disabled when below date picker is active.

• Make it in the previous date picker style
  
  

Displaying of "info about section" box

https://puu.sh/woeGV/223ba7a660.jpg - "info about section" is displayed out of the menu

Unselecting the selected records is unhandy

Steps:

1. Go to random list e.g. client list
2. Select all record
3. Try to unselect, by mouse clicking

Actual Results:

Unselecting the selected records is unhandy. Look at gif below:

"Brand Settings" - there is no displayed upload modal in "Brand Logo" section

Steps:

1. Go to "Brand Settings"
2. Click "Drag and drop, or click to upload" in Brand Logo section

Actual Results:

There is no displayed upload modal.

Highlighting section in which the user currently is

It would be good to highlight on the menu bar the section, in which the user currently is.

https://puu.sh/wjN57/c710a61abf.jpg

Layout > Header

• Quick search underline should have darker shade of main color. It shouldn't be white.
  
  
• Quick search underline on :focus, should be white.
• "Alerts" sidebar, can't be closed by clicking ourside it's container. It's working correctly with "Notification" sidebar
• Brand dropdown has different speparator colors:
  
  
• Brand dropdown title has cursor: pointer on :hover. It's not link, so it need to be fixed.
• All dropdowns in header, should have 8px space like in example below:
  
  

Adding a new translation - empty validation

Steps:

1. Go to 'Translations'
2. Enter default 'key' and 'translation'
3. Click "+"

Results:

There is displayed empty error confirm/error validations

https://puu.sh/wlLuR/2641490940.jpg

Form Elements -> Radio success - selection three options at once

Actual results:
Form Elements -> Radio success - There is possibility to select three options at once, and no possibility to unselect any of them.

Expected results:
Imho only one option at once should be possibility to select.

https://puu.sh/wlOfE/94362655fc.png

Layout > Fixed Actions

Fixed Actions should have box-shadow untill you reach end of page content:

UI > Tables

• Remove arrows from table head elements, cell which is active should have arrow.
  
  
• Disable possibility to filter by column, which have only actions:
  
  
• Remove background for tr on :hover
  
  

Table Pagination

• Hide pagination, when have less than 10 elements.
  
  
• Pagination element on hover has white color, should have main theme color.
  
  
• This arrow should be disabled, have opacity: 0.5 and cursor: not-allowed
  
  

'Dashboard' dropdown on 'Error 400' page

Imho there shouldn't be displayed 'Dashboard' dropdown on 'Error 400' page.

https://puu.sh/wlNcT/eb7367b5aa.jpg

Addition 'Filters' option from the front - end level

It would be good to add 'Filters' option on lists from the front - end level.

"Filters" - Sliders don't change the values

Steps:

1. Go to 'Client List'
2. Click "Filter" -> "Income", and try to change values by Slider

Actual Results:

Sliders don't change the values. Gif in attachment:

Search Input

Hi,

I think this search input

Is a low visability lvl .
Also selected background just entered text is almost the same as #02a8f3 and I must rly effort sight, to see how many letters I just selected :)

[Mobile] Client Details - Lack of one subsection

Preconditions:
device: Galaxy S4 - 360 x 640

1. Go to 'Client Details'

Results:

desktop: https://puu.sh/wplW0/106c6b9485.png
mobile: https://puu.sh/wplYV/0f2b5c12e3.png - lack of "Tickets"

Dashboard

• News widget has unnecessary gradient in description:
  
  
• "Upgrade" button in "System Information" should have red background:
  
  

Chart Widgets

• Time period should have always some value selected. It should also have arrow icon on the right.
  
  
  Project
  
• .card_header should have different height than defauld `cards. Please check project

• When I click on the "Compare" checkbox, it's label dissapear
  
  
• After I click on checkbox label, all checkboxes on this page will be selected.

Brand Settings -> Error validation displayed during "Cancel" clicking

Steps:

1. Go to Brand Settings
2. Click "Cancel"

Actual Results:

There is error validation "Fill this field" for Brand Name, Brand URL fields displayed during "Cancel" clicking

Templates - Mouse pointer on Template Content section - scroll doesn't work

1. Go to Templates
2. Hover on Template Content tekst area and then try to use scroll

Results:

Mouse pointer on Template Content section - scroll doesn't work

UI > Zero Data

Extra Small

• Has wrong spacing between elements, please dev-help folder in the photoshop project.
  
• Description should have line-height: 18px
• max-width: 172px

Small

• Has wrong spacing between elements, please dev-help folder in the photoshop project.
  
• Description should have line-height: 20px
• max-width: 224px

Default

• Has wrong spacing between elements, please dev-help folder in the photoshop project.
  
• Description should have line-height: 20px
• max-width: 256px

Large

• Has wrong spacing between elements, please dev-help folder in the photoshop project.
  
• max-width: 400px

Page > Client List

• Table on this section, should be in .card container, which will add missing box shadow.

• Pagination on this page, has wrong spacing. Correct spacing below:
  
  

• Action button should be aligned to the right, like this:
  
  

• Main filter on this page, should look like this:
  
  

• Last element in all dropdowns should have 8px spacing, like example below:
  
  

• Filter input has some issues with right border:
  
  

Table Interactions

• Dropdowns in this table, use different styles than default dropdown. For example, it has rounded corners, different style on ':hover' different icon for "second navigation level"
  

• Before I will be able to open new dropdown, I need to close previously open dropdown. Dropdown should be open instatly after I click on the "More" button. Preview of how it's working:
  

• Sometimes, I can open table dropdown, twice like in the screen below:
  
  

UI > Scrollbar

• Scrollbar should be used only in components, which don't have pagination.
  Components like tables should not have scroll bar
  
  

• Scrollbar has wrong style, this is how it should look like:
  
  

UI > Forms

• Missing preview of different statuses, like: success, danger, warning.
• .input-field__desc has wrong line-height. Correct line-height: 20px
  
  
  
• Disabled radio, checkboxes and switches, should have opacity: 0.5
• Disabled input and select should look like this:
  
  

Selects

• Selects and date pickers, don't have transition on :hover
• Select dropdown has wrong arrow position:
  
  
  
• Active select element, should not have blue text:
  
  

Slider

• Slider should have blue background for active part:
  
  

Sorting by ID on lists

Steps:

1. Go to random list e.g. client list
2. Click sorting by "ID"

Results:

Sorting does not work. If this is intended, the button should be not clicable.

Layout > Secondary Navigation

This navigation on mobile phones should look like this:

Layout > Navigation > Left > Thin

Mobile Vertical

• Opening of the main navigation should be animated, as the main content.
• Logo should be always visible, even when sub-nav is open. Design:
  
  
• when menu is open, content should't have grey overflow.
  
  

Mobile Horizontal

• Open sub-nav doesn't work correctly wehn you scroll down.
  
  
• On horizontal mobile, logo should't be fixed:
  
  

Success dialog strange behaviour when fading out

The gif below will explain everything