Commit f2ed107b authored by Julien Phalip's avatar Julien Phalip
Browse files

Simplified the admin changelist multi-sort interface specifically by removing... 

Simplified the admin changelist multi-sort interface specifically by removing the popup window, adding explicit tooltip help texts, improving the hover visual states and allowing all operations (i.e. removing a column from sorting and toggling the sorting with and without changing the sorting priority) to be actionable with just one click. Many thanks to Idan Gazit for the feedback and direction. Refs #16212.

git-svn-id: http://code.djangoproject.com/svn/django/trunk@16899 bcc190cf-cafb-0310-a4f2-bffc1f526a37
parent b1c3174c

django/contrib/admin/static/admin/css/base.css

+48 −41
Original line number Diff line number Diff line
@@ -309,77 +309,84 @@ tr.alt { 


/* SORTABLE TABLES */



thead th {

    padding: 0;

    line-height: normal;

}



thead th a:link, thead th a:visited {

    color: #666;

    display: block;

}



thead th.sorted {

    background: #c5c5c5 url(../img/nav-bg-selected.gif) top left repeat-x;

}



table thead th.sorted a {

    padding-right: 13px;

table thead th .text span {

    padding: 2px 5px;

    display:block;

}



table thead th.ascending a {

    background: url(../img/arrow-up.gif) right .4em no-repeat;

table thead th .text a {

    display: block;

    cursor: pointer;

    padding: 2px 5px;

}



table thead th.descending a {

    background: url(../img/arrow-down.gif) right .4em no-repeat;

table thead th.sortable:hover {

    background: white url(../img/nav-bg-reverse.gif) 0 -5px repeat-x;

}



table thead th.sorted a span.text {

   display: block;

   float: left;

   cursor: pointer; /* IE needs this */

thead th.sorted a.sortremove {

    visibility: hidden;

}



table thead th.sorted a span.sortpos {

table thead th.sorted:hover a.sortremove {

    visibility: visible;

}



table thead th.sorted .sortoptions {

    display: block;

    padding: 4px 5px 0 5px;

    float: right;

   font-size: .6em;

    text-align: right;

   cursor: pointer; /* IE needs this */

}



table thead th.sorted a img {

table thead th.sorted .sortpriority {

    font-size: .8em;

    min-width: 12px;

    text-align: center;

    vertical-align: top;

}



table thead th.sorted a span.clear {

   display: block;

   clear: both;

table thead th.sorted .sortoptions a {

    width: 14px;

    height: 12px;

    display: inline-block;

}



#sorting-popup-div {

    display: none;

    position: absolute;

    background-color: white;

    border: 1px solid #ddd;

    z-index: 2000; /* more than filters on right */

table thead th.sorted .sortoptions a.sortremove {

    background: url(../img/sorting-icons.gif) -4px -5px no-repeat;

}



#sorting-popup-div table {

    border-right: 0px;

    border-left: 0px;

table thead th.sorted .sortoptions a.sortremove:hover {

    background: url(../img/sorting-icons.gif) -4px -27px no-repeat;

}



#sorting-popup-div .reset {

    text-align: center;

table thead th.sorted .sortoptions a.ascending {

    background: url(../img/sorting-icons.gif) -5px -50px no-repeat;

}



#sorting-popup-div .cancel {

    font-size: 10px;

    background: #e1e1e1 url(../img/nav-bg.gif) 0 50% repeat-x;

    border-top: 1px solid #ddd;

    text-align: center;

table thead th.sorted .sortoptions a.ascending:hover {

    background: url(../img/sorting-icons.gif) -5px -72px no-repeat;

}



#sorting-popup-div .cancel a {

    width: 100%;

    display: block;

table thead th.sorted .sortoptions a.descending {

    background: url(../img/sorting-icons.gif) -5px -94px no-repeat;

}



table thead th.sorted .sortoptions a.descending:hover {

    background: url(../img/sorting-icons.gif) -5px -115px no-repeat;

}



/* ORDERABLE TABLES */

django/contrib/admin/static/admin/css/rtl.css

+1 −16
Original line number Diff line number Diff line
@@ -80,22 +80,7 @@ div.breadcrumbs { 


/* SORTABLE TABLES */





table thead th.sorted a {

    padding-left: 13px;

    padding-right: 0px;

}



table thead th.ascending a,

table thead th.descending a {

    background-position: left;

}



table thead th.sorted a span.text {

   float: right;

}



table thead th.sorted a span.sortpos {

table thead th.sorted .sortoptions {

   float: left;

}

django/contrib/admin/static/admin/img/arrow-down.gif

deleted100644 → 0
−80 B
Loading image diff...

django/contrib/admin/static/admin/img/arrow-up.gif

deleted100644 → 0
−838 B
Loading image diff...

django/contrib/admin/static/admin/img/icon_cog.gif

deleted100644 → 0
−537 B
Loading image diff...