GithubHelp home page GithubHelp logo

Styleing changes about phpredmin HOT 19 OPEN

sasanrose avatar sasanrose commented on August 24, 2024
Styleing changes

from phpredmin.

Comments (19)

sasanrose avatar sasanrose commented on August 24, 2024

I like the overall look. It seem a lot more easier to navigate.

from phpredmin.

eugef avatar eugef commented on August 24, 2024

Hi @blitzmann, new mockup looks really great! Looking forward to see it in action

from phpredmin.

blitzmann avatar blitzmann commented on August 24, 2024

Quick question:

The Info, config, stats, and slow log pages need to be altered to support this type of style. I would like to know if these pages have any information dependent on the current selected database, or if they provide information on the server only.

If they provide information on the server only, I think it might be best to hide the database list as it's irrelevant to the current information. The database will still be selected and can be found in the breadcrumb.

EDIT: I see that Info has a "database size" property that is database specific, so I will leave it along for now. Still curious with the other pages tho.

from phpredmin.

eugef avatar eugef commented on August 24, 2024

The Info, config, stats, and slow log pages have server-specific information only. But i don't think that selected DB should be hidden on these pages.

If i have lot of DBs, i don't want to lose selection when navigating through the pages.

from phpredmin.

blitzmann avatar blitzmann commented on August 24, 2024

I believe you're right.

The way I did this was to create a new list for the databases. I used this list to generate a border to the right. However, due to this, this border is always visible since the database are always visible. This required a few tweaks to the other pages as well to make it look more uniformed (it would be weird for this border to not connect to anything on the info page when it connects to the tabs on the main page).

The changes I made to the other pages: Made a head that had a border-left and border-top. The border-left connects to the existing border-right from the database list, while the border-top simply continues the visual style. Here's the changes so far (you've already seen the main page above).

Info page (and config, stats, slowlog)

Old:
infoold
New:
info

Key searching

Old:
searchold
New:
searchnew

Rename, move, expire

Old:
moveold
New:
move

Still playing around and tweaking, but should have a pull request by the weekend.

from phpredmin.

sasanrose avatar sasanrose commented on August 24, 2024

Thanks @blitzmann, it is nice. Also, I agree with @eugef. Although DB name or Id is available in breadcrumb, I believe it's not necessary to remove them from the navigation menu in info or config page. Since, it makes navigation harder. Moreover, I also like to be able to navigate between databases from any page.

from phpredmin.

eugef avatar eugef commented on August 24, 2024

I would also like to have normal cursor pointer over the selected DB, otherwise it is not cleat that you can click on it.

screen shot

from phpredmin.

sasanrose avatar sasanrose commented on August 24, 2024

I agree with @eugef. Otherwise, it shouldn't be click-able at all

from phpredmin.

eugef avatar eugef commented on August 24, 2024

I think, it should be clickable as it is the only way to open welcome page for database.

from phpredmin.

sasanrose avatar sasanrose commented on August 24, 2024

I believe that you can click on Home in every page as it contains the selected server and database ids in the url

from phpredmin.

eugef avatar eugef commented on August 24, 2024

"Home" will work as well, but is is not so obvious as clicking on DB name in navigation column.

from phpredmin.

sasanrose avatar sasanrose commented on August 24, 2024

I agree. It is better to make it work in either ways

from phpredmin.

blitzmann avatar blitzmann commented on August 24, 2024

I will add cursor to active tab on dblist only (other tabs don't need it). I'll also fix the pages that I forgot about. (see comments in pull request #34)

Also, the general navigation of the application should be re-evaluated to address some issues (the aforementioned "Home" not being intuitive to get back to the welcome screen being an example). I think the navigation for this app has a good base, just needs polishing. There have been many times where the navigation is inconsistent with what we're expecting. That would probably be a much bigger project after a much larger talk about it. I'll try to get a list together about some things that nag at me about the layout/navigation and start a discussion on it.

I encourage further discussion as to any ideas that might help smooth things over

from phpredmin.

sasanrose avatar sasanrose commented on August 24, 2024

@blitzmann I agree with you. First, We need to detect the deficiencies in order to decide how to correct them. Furthermore, I believe you are the perfect person to make the first list.

from phpredmin.

eugef avatar eugef commented on August 24, 2024

@blitzmann there is issue with styling of "Edit hash key" page:

phpredmin hash field edit

from phpredmin.

blitzmann avatar blitzmann commented on August 24, 2024

Will look into it, thanks

from phpredmin.

blitzmann avatar blitzmann commented on August 24, 2024

How did you get to that spot? I tried to look into this tonight but couldn't find the offending page.

from phpredmin.

eugef avatar eugef commented on August 24, 2024

Hi @blitzmann, here are steps to follow

  • Select any DB, then click on "Hash" tab
  • Add new hash - fill in all fields and press "Add & edit"
  • In list of hash keys click on edit - you will see "Edit hash key" form that is not styled properly

from phpredmin.

blitzmann avatar blitzmann commented on August 24, 2024

Thanks. Pull request submitted.

from phpredmin.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.