WordPress.org
Get WordPress

Plugin Directory

Changeset 1641783


Ignore:
Timestamp:
04/20/2017 09:22:31 PM (9 years ago)
Author:
robby.roboter
Message:

responsivness in controlls, validation

Location:
redi-restaurant-reservation/branches/newDesign
Files:
3 edited

Legend:

Unmodified
Added
Removed

  • redi-restaurant-reservation/branches/newDesign/css/restaurant.css

    r1640064 r1641783  
    289289    text-align: left;
    290290    color: #fa9090;
    291     display:inline-block;
     291    display: inline-block;
    292292    max-width: 400px;
    293293    margin: 0 auto;
    … …  
    723723    text-align: left;
    724724    max-width: 400px;
    725     margin: 0 auto;
     725    min-width: 290px;
     726    margin: 0 auto;
     727    height: 30px;
    726728}
    727729
    … …  
    731733    color: #888;
    732734    width: 100%;
     735    min-width: 290px;
     736    max-width: 400px;
     737    position: relative;
    733738}
    734739
    … …  
    749754
    750755span.selectArrow2 {
    751     position: relative;
     756    position: absolute;
    752757    float: left;
    753758    height: 32px;
    754759    left: 0;
    755 }
     760    z-index: 10;
     761    top:-1px;
     762}
     763
    756764/* end on name field */
    757765
    … …  
    763771    border-bottom-left-radius: 3px;
    764772    text-align: center;
    765     background: #f3f3f3;
    766     background-image: url(../img/f_phone.png);
    767     background-repeat: no-repeat;
    768     background-position: center;
     773    background: #f3f3f3 url(../img/f_phone.png) no-repeat center;
    769774}
    770775
    … …  
    774779
    775780span.selectArrow3 {
    776     position: relative;
     781    position: absolute;
    777782    float: left;
    778783    height: 32px;
     784    left: 0;
     785    z-index: 10;
     786    top:-1px;
    779787}
    780788
    … …  
    794802
    795803span.selectArrow4 {
    796     position: relative;
     804    position: absolute;
    797805    float: left;
    798806    height: 32px;
     807    left: 0;
     808    z-index: 10;
     809    top:-1px;
    799810}
    800811
    … …  
    808819    font-family: 'PT Sans Narrow', verdana;
    809820    font-size: 16px;
    810     color: rgb(142, 142, 142);
    811     text-indent: 20px;
     821    text-indent: 70px;
    812822    background: #ffffff;
    813823    overflow: hidden;
    … …  
    819829    border-bottom-right-radius: 3px;
    820830    border-image: none;
    821     border-style: solid solid solid none;
    822831    border-top-right-radius: 3px;
    823     border-width: 1px 1px 1px medium;
    824832    color: rgb(142, 142, 142);
     833    border: 1px solid #bbb;
    825834}
    826835
    … …  
    848857
    849858span.selectArrow5 {
    850     position: relative;
     859    position: absolute;
    851860    float: left;
    852     height: 149px;
    853     margin: 1px 0 0 0;
     861    height: 32px;
     862    left: 0;
     863    z-index: 10;
    854864}
    855865
    … …  
    872882
    873883span.selectArrow6, span.selected2 {
    874     position: relative;
     884    position: absolute;
    875885    float: left;
    876886    height: 32px;
     887    left: 0;
    877888    z-index: 10;
    878889}
    … …  
    921932
    922933span.selectArrow7, span.selected2 {
    923     position: relative;
     934    position: absolute;
    924935    float: left;
    925936    height: 32px;
     937    left: 0;
    926938    z-index: 10;
    927939}
    … …  
    10191031    padding: 0;
    10201032}
    1021 .checkbox_field{
     1033
     1034.checkbox_field {
    10221035    line-height: 32px;
    10231036    color: rgb(142, 142, 142);
    … …  
    10251038    font-family: "PT Sans Narrow", verdana;
    10261039    font-size: 16px;
    1027     margin-left: 20px;
    1028 }
     1040    margin-left: 70px;
     1041}
     1042
    10291043.text_field {
    10301044    -moz-border-bottom-colors: none;
    … …  
    10441058    height: 31px;
    10451059    overflow: hidden;
    1046     text-indent: 20px;
     1060    text-indent: 70px;
    10471061    width: 69%;
    10481062}
    … …  
    10571071.required {
    10581072    border-top: 2px solid #fa9999 !important;
     1073    top:-1px;
    10591074}
    10601075
    … …  
    11871202    max-width: 400px;
    11881203    margin: 0 auto;
     1204    min-width: 290px;
    11891205}
    11901206
    … …  
    12241240    box-shadow: none !important;
    12251241    color: #888 !important;
    1226     margin: 1px 0 0 0;
    1227     width:87%;
     1242    margin: auto 0;
     1243    width: 100%;
     1244    position: absolute;
     1245    left: 0;
     1246    min-width: 290px;
     1247    max-width: 400px;
     1248    z-index: 0;
    12281249}
    12291250
    … …  
    12471268}
    12481269
    1249 #step2{
    1250     min-width:290px;
    1251 }
    1252 #redi-booking-buttons table tr td{
     1270#step2 {
     1271    min-width: 290px;
     1272}
     1273
     1274#redi-booking-buttons table tr td {
    12531275    margin: 0;
    12541276    padding: 0;
    12551277}
    1256 #redi-booking-buttons table{
    1257     width:100%;
    1258     text-align:center;
    1259 }
    1260 #buttons_first_step{
    1261     height:40px;
     1278
     1279#redi-booking-buttons table {
     1280    width: 100%;
     1281    text-align: center;
     1282}
     1283
     1284#buttons_first_step {
     1285    height: 40px;
    12621286    max-width: 400px;
    12631287    margin: 0 auto;
    12641288}
    1265 #redi-booking-buttons{
    1266     height:40px;
     1289
     1290#redi-booking-buttons {
     1291    height: 40px;
    12671292    max-width: 400px;
    12681293    margin: 0 auto;
    12691294}
    1270 #step2errors{
     1295
     1296#step2errors {
    12711297    margin: 15px;
    12721298}
    1273 #step2load{
     1299
     1300#step2load {
    12741301    margin-left: 140px;
    12751302}
     1303
     1304#redi-booking-div .f_text_selection_step2 table tr, #redi-booking-div .f_text_selection_step2 table td{
     1305    padding: 0.1em 1em;
     1306}
     1307.text_field.form_validation_error {
     1308    border-color: #fa9090;
     1309}
     1310.field_required.form_validation_error{
     1311    outline: 1px solid #fa9090;
     1312}

  • redi-restaurant-reservation/branches/newDesign/js/restaurant.js

    r1609965 r1641783  
    209209        if ($('#UserEmail').val() === '' || !validateEmail($('#UserEmail').val())) {
    210210            $('#email_validation_error').show();
    211             $('#email_validation_ok').hide();
     211            $('#UserEmail').addClass('form_validation_error');
    212212            $('#incorrect_email').show();
    213213            $('#UserEmail').focus();
    … …  
    216216        else {
    217217            $('#email_validation_error').hide();
    218             $('#email_validation_ok').show();
     218            $('#UserEmail').removeClass('form_validation_error');
    219219            $('#incorrect_email').hide();
    220220        }
    221221        if ($('#UserPhone').val() === '') {
    222222            $('#phone_validation_error').show();
    223             $('#phone_validation_ok').hide();
     223            $('#UserPhone').addClass('form_validation_error');
    224224            $('#incorrect_phone').show();
    225225            $('#UserPhone').focus();
    … …  
    228228        else {
    229229            $('#phone_validation_error').hide();
    230             $('#phone_validation_ok').show();
     230            $('#UserPhone').removeClass('form_validation_error');
    231231            $('#incorrect_phone').hide();
    232232        }
    233233        if ($('#UserName').val() === '') {
    234234            $('#name_validation_error').show();
    235             $('#name_validation_ok').hide();
     235            $('#UserName').addClass('form_validation_error');
    236236            $('#incorrect_name').show();
    237237            $('#UserName').focus();
    … …  
    240240        else {
    241241            $('#name_validation_error').hide();
    242             $('#name_validation_ok').show();
     242            $('#UserName').removeClass('form_validation_error');
    243243            $('#incorrect_name').hide();
    244244        }
    … …  
    247247            if ($(this).attr('type') === 'checkbox' && $(this).attr('checked') !== 'checked' || $(this).attr('type') === 'textbox' && $(this).val() === '') {
    248248                $('#' + this.id + '_message').show();
     249                $('#' + this.id).addClass('form_validation_error');
    249250                error = true;
    250251            } else {
    251252                $('#' + this.id + '_message').hide();
     253                $('#' + this.id).removeClass('form_validation_error');
    252254            }
    253255        });

  • redi-restaurant-reservation/branches/newDesign/templates/frontend.php

    r1640064 r1641783  
    275275            </div>
    276276            <br/>
    277             <div class="f_select2">
     277            <div  class="f_select2">
    278278                <div class="f_input_box">
    279279                    <span class="selectArrow4 required"></span>
    … …  
    287287            </div>
    288288            <br/>
    289             <div class="f_select2">
     289            <div style="height: 150px;" class="f_select2">
    290290                <div class="f_input_box">
    291                     <span class="selectArrow5"></span>
    292                     <textarea class="textarea_field" placeholder="<?php _e( 'comment', 'redi-booking' ); ?>" id="UserComments"></textarea>
    293                 </div>
    294             </div>
     291                    <span style="height: 150px;" class="selectArrow5"></span>
     292                    <textarea style="height: 151px;" class="textarea_field" placeholder="<?php _e( 'comment', 'redi-booking' ); ?>" id="UserComments"></textarea>
     293                </div>
     294            </div>
     295            <br/>
    295296            <!-- custom fields -->
    296297            <?php for ( $i = 1; $i != 6; $i ++ ): ?>
    … …  
    331332                        <?php endif; ?>
    332333                    </div>
     334                    <br/>
    333335                <?php endif; ?>
    334336            <?php endfor; ?>
Note: See TracChangeset for help on using the changeset viewer.