diff --git a/css/style.css b/css/style.css index bed1653..93d18e9 100755 --- a/css/style.css +++ b/css/style.css @@ -58,8 +58,6 @@ span.nexttab, span.prevtab{margin:35px 0 0 0} .panel .step-nav a:hover{background-color:transparent} .helpdialog{margin-right:5px} - - /* # header *******************/ #logged{margin-right:0px;margin-top:20px;margin-bottom:20px} @@ -79,7 +77,7 @@ span.nexttab, span.prevtab{margin:35px 0 0 0} .navbar-collapse{box-shadow:none;border-top:0;margin-top:10px;} #logged{right:80px; position:absolute; top:15px;margin-top:0} } -.navbar-inverse{min-height:71px} +/*.navbar-inverse{min-height:71px}*/ diff --git a/js/phpList3ToBootstrap.js b/js/phpList3ToBootstrap.js index a09fa27..6a13696 100644 --- a/js/phpList3ToBootstrap.js +++ b/js/phpList3ToBootstrap.js @@ -23,6 +23,23 @@ var myfunction = function() { $('.action-button').addClass('btn btn-lg btn-primary'); $('.reset').addClass('btn btn-link'); $('span.button a.opendialog span.view').parent().parent().parent().find('span.button').removeClass('btn-default'); + $('.actions .fright').addClass('text-right'); + +/* MINITABS, WEBBLERTABS AN FILTERDIVS */ + $('.minitabs #webblertabs').addClass('navbar navbar-left navbar-default'); + $('.minitabs #webblertabs ul').addClass('nav navbar-nav'); + $('.minitabs #webblertabs ul li.current').addClass('active'); + $('.minitabs #webblertabs').attr('id',''); + $('#webblertabs').attr('id','dropdown-tabs'); + $('#dropdown-tabs').addClass('btn-group'); + $('#dropdown-tabs ul').addClass('dropdown-menu'); + $('#dropdown-tabs ul').before(''); + $("#dropdown-tabs .dropdown-menu li").each(function(){ + $("#dropdown-tabs .btn:first-child").html($(this).parent().find('.current').text()+'   '); + $("#dropdown-tabs .btn:first-child").val($(this).parent().find('.current').text()); + }); + $('.filterdiv').addClass('navbar navbar-default navbar-form navbar-right'); + $('.filterdiv, .minitabs,#webblertabs').after('
'); /* FORMS */ $('input[type=text],input[type=password],textarea').addClass('form-control'); diff --git a/js/phplist.js b/js/phplist.js index 17719a8..9bcce3b 100644 --- a/js/phplist.js +++ b/js/phplist.js @@ -42,7 +42,7 @@ $(document).ready(function() { }); }); - // open/close div global help +/* // open/close div global help $("#globalhelp").click(function(){ // if(matchMedia('only screen and (max-width: 767px)').matches){ $("#menuTop").hide(); } $("#globalhelp .content").toggle(); @@ -110,6 +110,6 @@ $(document).ready(function() { } - +*/ }); diff --git a/pages/design.php b/pages/design.php deleted file mode 100644 index 1ef721e..0000000 --- a/pages/design.php +++ /dev/null @@ -1,803 +0,0 @@ - - - - - - - - - - -

-
-
-BACK TO TOP
-

Common Text styles

-BACK TO TOP -
-
- - - - - - - - - - - - - - - -

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Paragraph

preformatted
Strong
Emphasis
Deleted
Highlighted
Inserted
Link
-

- -
- -
-
-BACK TO TOP
-

Custom text style

-BACK TO TOP -
-

Page title style

-

Page title style

-

Page title style

-

You can use this style with any heading of paragraph. Just add the class .pagetitle inline the html tag.

-

-
- -
- -
-BACK TO TOP
-

Lists

-BACK TO TOP -
-
-

Unordered list

- -

Orderer list

-
    -
  1. First element
    2. -
  2. Second element
    3. -
  3. Third element
    4. -
-

-
- -
- -
-BACK TO TOP
-

Boxes

-BACK TO TOP -
-
-
This box is for notification messages. Just add the class .note to a div.
-
This box is for error messages. Just add the class .error to a div.
-
This box is for result messages. Just add the class .result to a div.
-

NOTE: There is a black box for "result messages" that go invisible after a few seconds. Reload this page to see it.

-

-
- -
- -
-BACK TO TOP
-

The panel

-BACK TO TOP -
-
-

Most of the screens are structured with a div named .panel, including a .header div, a .content div and a .footer div (usually empty).

- -

The code above looks like this:

-
-

The header of the panel

-
The content of the panel
-
The footer of the panel
-
-
-

You can add inside the .content div of the panel all kind of information elemnts, like tables, forms, tabs, accordions, etc.

-

-
- -
- -
-BACK TO TOP
-

Helper classes

-BACK TO TOP -
-

Show & Hide

-

Thare are 3 items in this list below. You can modify your browser window size to see the effect.

- -

The first item one has no class and will be visible on all screens.
-The second has the class .show-on-mobile and will be visible only on screens smaller than 768px width.
-The third has the class .hide-on-mobile and will be visible only on screens bigger than 768px width.
-You can apply this two classes to any element, like cell tables, row tables, complete tables, divs, form elements, paragraphs, etc.

-

-
- -
- -
-BACK TO TOP
-

Tables

-BACK TO TOP -
-
-

The first columns of tables has class .listinghdname for th, and .listingrowname for tds.
-The rest of the columns has class .listinghdelement for th, and .listingelement for tds.
-The grey rows of tables has class .row1 and the white rows has class .rowelement.

- - - - - - - - - - - - - - - - - - - - -
th .listinghdnameth .listinghdelement
td .listingrownametd .listingelementtr .row1
td .listingrownametd .listingelementtr .rowelement
-
-This is the code of the table above: - -

-
- -
- -
-BACK TO TOP
-

ACCORDION

-BACK TO TOP -
-
-

To use an accordion, create a div class .accordion. -Into that div add, for each item, a <h3> tag and insde a <a> with the item title. And after that add a div with the item text. Like this:

- -The result should look like this: -
-

First item title

-
First item text
-

Second item title

-
Second item text
-
-

-
- -
- - - -
- -
-BACK TO TOP
-

Buttons

-BACK TO TOP -
-
- - - - - - -
Login
Logout
Action button
Submit button
Reset button
-

-These BACK and NEXT buttons need to be inside a .panel class. So if you want to use them inside a table, -just add the class="panel" inline the td, as it is done below. - - - -
-
Back
- -

- - - - - -
-

- - - - - -
-

- - - - - - - -
-
-
-

The big buttons of the Dashboard

-
-

This buttons only works if they are inside a table inside an accordion. This is a very bad practice, we should modify this soon making a new class named .large-button with all the required attributes to use this large size buttons anywhere.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Campaign
View
Suscriber
Statistics
Lists
Suscribers
Import
Export
Reconcile
Configure
Attributes
Attribute
Subscribe page
Admins
Admin attributes
Send
Templates
Messages
Process
Bounces
Plugin
Setup
Databases
Upgrade
Log
-
-

-

-
- -
- -
-BACK TO TOP
-

Loaders

-BACK TO TOP -
-
-

Spinner

- - - - -
Please wait - -
-

-

Progressbar

-
-
- -

-
- -
- -
-BACK TO TOP
-

Tabs

-BACK TO TOP -
-
-

Common Tabs

-
- -
-

Tab 1 title

-

Tab 1 text.

-
-
-

Tab 2 title

-

Tab 2 text.

-
-
-
- -
-
-

The Send Tabs

- -This tabs are used on the "Start a new Campaign" screen. Each tab is realy a link but designed as a tab, -and they use the jQuery plugin http://www.gmarwaha.com/jquery/jcarousellite/ -to slide the tabs when they exceed the width of the container. - -
-
- -
- - -
-
- -
-
- -
- -
-BACK TO TOP
-

Form elements

-BACK TO TOP -
-
- - - - - - - - - - -
- -
-
-
-

There is a small hack in the "Start a New Campaign" screen, under the tab "List". -This hack use a javascript applied to the checkbox inside the #listselection div.

- -
-
-
    -
      -
    • - - -
      • -
    -
    -
    -
    -

    All the classes showed below are needed for this to work.

    - - -
    - -
    - -
    - -
    -BACK TO TOP
    -

    Icons

    -BACK TO TOP -
    -
    - -

    There are some small icons in the links of the page "Manage Subscribers" (usermgt), but they are only visible in that page so I can only include the images here.

    - -

    -

    -

    -

    -

    -

    -

    -

    - -
    - - - \ No newline at end of file