Dodawanie przepisów widok

Dzisiaj krótko na temat postępu prac nad kolejną funkcjonalnością. Ostatnio pokazałem piękny mockup ukazujący moją wizję na ekranie komputera. Dzisiaj pomysł staje się realnym bytem (na razie nie działającym, ale integralnym z portalem).

screen

Mockup ciałem się stał i powstał całkiem schludny kod HTMLowy prezentujący stronę dodawania przepisów. Jest to tylko wersja testowa, bez pobierania kategorii, czy poziomu trudności z bazy, ale prezentuje się całkiem ładnie.

A propos schludności kodu to:

<div class="row">
    <div class="col-md-2">
        &nbsp;
    </div>
    <div class="col-md-8">
        <form name="editForm" class="col-lg-12">
            <div class="row">
                <div class="col-md-12">
                    <input type="text" name="Name" class="form-control" ng-model="dish.Name" placeholder="Nazwa" required />
                    <span class="errorMessage" ng-show="editForm.Name.$touched && editForm.Name.$invalid">
                        Nazwa jest wymagana
                    </span>
                </div>
            </div>
            <br />
            <div class="row">
                <div class="col-md-12">
                    <img src="http://localhost/SocialCooking.Web/Content/imgs/placeholder3.png" height="300" width="1230" />
                    <!--<input type="text" name="Photo" class="form-control" ng-model="dish.PhotoPath"/>-->
                </div>
            </div>
            <br />
            <div class="row">
                <div class="col-md-4">
                    Kategoria:
                </div>
                <div class="col-md-4">
                    Poziom trudności:
                </div>
                <div class="col-md-4">
                    Czas przygotowania:
                </div>
            </div>
            <br />
            <div class="row">
                <div class="col-md-4">
                    <div class="row" ng-repeat="(key, prop) in categories">
                        <label>
                            <input type="radio" ng-model="dish.CategoryId" value="prop" />
                            {{key}}
                        </label>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="row" ng-repeat="(key, prop) in difficultyLevels">
                        <label>
                            <input type="radio" ng-model="dish.DifficultyLevelId" value="prop" />
                            {{key}}
                        </label>
                    </div>
                </div>
                <div class="col-md-4">
                    <select class="form-control" ng-options="key for (key, prop) in prepTimes" ng-model="dish.PrepareTime"></select>
                </div>
            </div>
            <br />
            <div class="row">
                <div class="col-md-4">
                    Składniki:
                </div>
            </div>
            <div class="row">
                <div class="col-md-9">
                    <input type="text" name="NewIngredients" class="form-control" ng-model="tempIngredients"/>
                </div>
                <div class="col-md-3">
                    <button class="btn btn-default" type="button" ng-click="addIngredients()">Dodaj</button>
                </div>
            </div>
            <br/>
            <div class="row ingredientBox">
                <div class="col-md-12">
                    <div class="col-md-4 left" ng-repeat="item in dish.Ingredients">
                        <span class="glyphicon glyphicon-ok"></span>{{item}}
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <div name="Recipe" text-angular ng-model="dish.Recipe" required></div>
                    <span class="errorMessage" ng-show="editForm.Recipe.$touched && editForm.Recipe.$invalid">
                        Przepis jest wymagany
                    </span>
                </div>
            </div>
            <br />
            <div class="row">
                <div class="col-md-9"></div>
                <div class="col-md-1"><button class="btn btn-default" type="reset" ng-click="">Anuluj</button></div>
                <div class="col-md-1"><button class="btn btn-default" type="button" ng-click="">Zapisz szkic</button></div>
                <div class="col-md-1"><button class="btn btn-default" type="submit" ng-click="addDish()">Publikuj</button></div>
            </div>
        </form>
    </div>

    <div class="col-md-2">
        &nbsp;
    </div>
</div>

Troszkę trzeba będzie poprawić wyświetlanie na mniejszych ekranach, bo kategorie mieszają się z poziomami, ale jest naprawdę nieźle. Bootstrap jednak jak zwykle okazuje się niezastąpiony przy ogarnianiu layout.

Tak jak wspominałem dzisiaj krótko także uciekam dalej do kodu, a niedługo zrobię drobne podsumowanie całego konkursu z mojego punktu widzenia.

Related posts