Advertisement
Guest User

Untitled

a guest
Feb 25th, 2020
117
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 28.09 KB | None | 0 0
  1. <template>
  2.     <fragment>
  3.         <v-modal name='newCustomer' :on-close='onCloseNewCustomer'>
  4.             <v-modal name='newInvoiceAddress' :on-close='onCloseNewInvoiceAddress'>
  5.                 <template #default='{ values }'>
  6.                     <v-panel>
  7.                         <template #header>
  8.                             <span>New invoice address</span>
  9.                         </template>
  10.                         <template #content>
  11.                             <v-form class='padding(16px)' :values='values' action='/api/addresses/store' method='post' @on-response='newCustomerInvoiceAddressSubmitted'>
  12.                                 <template #inputs='{ inputs }'>
  13.                                     <input class='margin-bottom(16px)' type='text' :placeholder='$t("addresses.postal")' v-model='inputs.postal'/>
  14.                                     <input class='margin-bottom(16px)' type='text' :placeholder='$t("addresses.city")' v-model='inputs.city'/>
  15.                                     <input class='margin-bottom(16px)' type='text' :placeholder='$t("addresses.house_number")' v-model='inputs.house_number'/>
  16.                                     <input class='margin-bottom(16px)' type='text' :placeholder='$t("addresses.builiding_number")' v-model='inputs.builiding_number'/>
  17.                                     <input class='margin-bottom(16px)' type='text' :placeholder='$t("addresses.country")' v-model='inputs.country'/>
  18.                                     <input class='fill' type='submit'>
  19.                                 </template>
  20.                             </v-form>
  21.                         </template>
  22.                     </v-panel>
  23.                 </template>
  24.             </v-modal>
  25.             <v-modal name='newHqAddress' :on-close='onCloseNewHqAddress'>
  26.                 <template #default='{ values }'>
  27.                     <v-panel>
  28.                         <template #header>
  29.                             <span>New headquarters address</span>
  30.                         </template>
  31.                         <template #content>
  32.                             <v-form class='padding(16px)' :values='values' action='/api/addresses/store' method='post' @on-response='newCustomerHqAddressSubmitted'>
  33.                                 <template #inputs='{ inputs }'>
  34.                                     <input class='margin-bottom(16px)' type='text' :placeholder='$t("addresses.postal")' v-model='inputs.postal'/>
  35.                                     <input class='margin-bottom(16px)' type='text' :placeholder='$t("addresses.city")' v-model='inputs.city'/>
  36.                                     <input class='margin-bottom(16px)' type='text' :placeholder='$t("addresses.house_number")' v-model='inputs.house_number'/>
  37.                                     <input class='margin-bottom(16px)' type='text' :placeholder='$t("addresses.builiding_number")' v-model='inputs.builiding_number'/>
  38.                                     <input class='margin-bottom(16px)' type='text' :placeholder='$t("addresses.country")' v-model='inputs.country'/>
  39.                                     <input class='fill' type='submit'>
  40.                                 </template>
  41.                             </v-form>
  42.                         </template>
  43.                     </v-panel>
  44.                 </template>
  45.             </v-modal>
  46.             <v-panel>
  47.                 <template #header>
  48.                     <span>New customer</span>
  49.                 </template>
  50.                 <template #content>
  51.                     <v-form ref='newCustomerForm' class='padding(16px)' action='/api/customers/store' method='post' @on-response='newCustomerSubmitted' :on-submit='onNewCustomerSubmit'>
  52.                         <template #inputs='{ inputs }'>
  53.                             <input class='margin-bottom(16px)' type='text' :placeholder="$t('customers.name')" v-model='inputs.name'/>
  54.                             <input class='margin-bottom(16px)' type='text' :placeholder="$t('customers.name_short')" v-model='inputs.name_short'/>
  55.                             <input class='margin-bottom(16px)' type='text' :placeholder="$t('customers.name_shortened')" v-model='inputs.name_shortened'/>
  56.                             <input class='margin-bottom(16px)' type='text' :placeholder="$t('customers.tin')" v-model='inputs.tin'/>
  57.                             <input class='margin-bottom(16px)' type='text' :placeholder="$t('customers.tin_country')" v-model='inputs.tin_country'/>
  58.                             <button class='margin-bottom(16px) fill' @click.prevent='openNewInvoiceAddress'>Add invoice address</button>
  59.                             <v-checkbox class='margin-bottom(16px)' v-model='inputs.separateHqAddress'>
  60.                                 Different headquarters address?
  61.                             </v-checkbox>
  62.                             <button v-show='inputs.separateHqAddress' class='margin-bottom(16px) fill' @click.prevent='openNewHeadquartersAddress'>Add headquarters address</button>
  63.                             <input class='fill' type='submit'>
  64.                         </template>
  65.                     </v-form>
  66.                 </template>
  67.             </v-panel>
  68.         </v-modal>
  69.  
  70.         <v-modal name='commission'>
  71.             <v-panel>
  72.                 <template #header>
  73.                     <span>{{ $t("orders.commission") }}</span>
  74.                 </template>
  75.                 <template #content>
  76.                     <div class="display(flex) flex-direction(column) flex-grow(1) padding(16px)">
  77.                         <textarea class="resize(vertical)" v-model='$refs.form.inputs.commission'/>
  78.                         <button class="margin-top(16px)" @click='$modals.commission.close()'>Save</button>
  79.                     </div>
  80.                 </template>
  81.             </v-panel>
  82.         </v-modal>
  83.  
  84.         <v-modal name='notes'>
  85.             <v-panel>
  86.                 <template #header>
  87.                     <span>{{ $t("orders.notes") }}</span>
  88.                 </template>
  89.                 <template #content>
  90.                     <div class="display(flex) flex-direction(column) flex-grow(1) padding(16px)">
  91.                         <textarea class="resize(vertical)" v-model='$refs.form.inputs.notes'/>
  92.                         <button class="margin-top(16px)" @click='$modals.notes.close()'>Save</button>
  93.                     </div>
  94.                 </template>
  95.             </v-panel>
  96.         </v-modal>
  97.  
  98.         <v-modal name='newAddress' :on-close='onCloseNewAddress'>
  99.             <template #default='{ values }'>
  100.                 <v-panel>
  101.                     <template #header>
  102.                         <span>New address</span>
  103.                     </template>
  104.                     <template #content>
  105.                         <v-form class='padding(16px)' :values='values' action='/api/addresses/store' method='post' @on-response='newAddressSubmitted'>
  106.                             <template #inputs='{ inputs }'>
  107.                                 <input class='margin-bottom(16px)' type='text' :placeholder='$t("addresses.postal")' v-model='inputs.postal'/>
  108.                                 <input class='margin-bottom(16px)' type='text' :placeholder='$t("addresses.city")' v-model='inputs.city'/>
  109.                                 <input class='margin-bottom(16px)' type='text' :placeholder='$t("addresses.house_number")' v-model='inputs.house_number'/>
  110.                                 <input class='margin-bottom(16px)' type='text' :placeholder='$t("addresses.builiding_number")' v-model='inputs.builiding_number'/>
  111.                                 <input class='margin-bottom(16px)' type='text' :placeholder='$t("addresses.country")' v-model='inputs.country'/>
  112.                                 <input class='fill' type='submit'>
  113.                             </template>
  114.                         </v-form>
  115.                     </template>
  116.                 </v-panel>
  117.             </template>
  118.         </v-modal>
  119.  
  120.         <v-panel class="grid-column(span_8)">
  121.             <template #header>
  122.                 <span>{{ $t('orders.order') }}</span>
  123.             </template>
  124.             <template #content>
  125.                 <v-table :filterable='true' :items='orders' v-stash='{ properties: ["selectedKey"] }' @on-row-selected='rowSelected'>
  126.                     <template #columns>
  127.                         <v-table-column>
  128.                             <div class="flex-grow(1) display(flex) justify-content(space-around) align-content(center) align-items(center)">
  129.                                 <i class="fas fa-bolt"></i>
  130.                             </div>
  131.                         </v-table-column>
  132.                         <v-table-column name='status' :display-name='$t("orders.status")'/>
  133.                         <v-table-column name='number' :display-name='$t("orders.number")'/>
  134.                         <v-table-column name='customer' :display-name='$t("orders.customer")' :sort-value='(column) => column && column.name'/>
  135.                        <v-table-column name='commission' :display-name='$t("orders.commission")'/>
  136.                        <v-table-column name='delivery_address' :display-name='$t("orders.delivery_address")'/>
  137.                        <v-table-column name='f' :display-name='$t("orders.f")'/>
  138.                        <v-table-column name='hs' :display-name='$t("orders.hs")'/>
  139.                        <v-table-column name='d' :display-name='$t("orders.d")'/>
  140.                        <v-table-column name='r' :display-name='$t("orders.r")'/>
  141.                        <v-table-column name='has_addons' :display-name='$t("orders.has_addons")'/>
  142.                        <v-table-column name='kg' :display-name='$t("orders.kg")'/>
  143.                        <v-table-column name='kw' :display-name='$t("orders.kw")'/>
  144.                        <v-table-column name='load_date' :display-name='$t("orders.load_date")'/>
  145.                        <v-table-column name='value' :display-name='$t("orders.value")'/>
  146.                        <v-table-column name='producent' :display-name='$t("orders.producent")'/>
  147.                        <v-table-column name='zd' :display-name='$t("orders.zd")'/>
  148.                        <v-table-column name='notes' :display-name='$t("orders.notes")'/>
  149.                        <v-table-column name='fv' :display-name='$t("orders.fv")'/>
  150.                        <v-table-column name='invoicer' :display-name='$t("orders.invoicer")'/>
  151.                        <v-table-column name='representant' :display-name='$t("orders.representant")'/>
  152.                        <v-table-column name='provision' :display-name='$t("orders.provision")'/>
  153.                    </template>
  154.                    <template #rows='{ rows }'>
  155.                        <v-table-row class='table-sumrow'>
  156.                            <v-table-cell>
  157.                                <div class='display(flex) flex-grow(1) justify-content(flex-end)'>
  158.                                    Σ
  159.                                </div>
  160.                            </v-table-cell>
  161.                            <v-table-cell/>
  162.                            <v-table-cell/>
  163.                            <v-table-cell/>
  164.                            <v-table-cell/>
  165.                            <v-table-cell/>
  166.                            <v-table-cell>
  167.                                <span>{{ Object.values(rows).map(o => o.f).reduce((sum, val) => sum + val, 0) }}</span>
  168.                            </v-table-cell>
  169.                            <v-table-cell>
  170.                                <span>{{ Object.values(rows).map(o => o.hs).reduce((sum, val) => sum + val, 0) }}</span>
  171.                            </v-table-cell>
  172.                            <v-table-cell>
  173.                                <span>{{ Object.values(rows).map(o => o.d).reduce((sum, val) => sum + val, 0) }}</span>
  174.                            </v-table-cell>
  175.                            <v-table-cell>
  176.                                <span>{{ Object.values(rows).map(o => o.r).reduce((sum, val) => sum + val, 0) }}</span>
  177.                            </v-table-cell>
  178.                            <v-table-cell/>
  179.                            <v-table-cell>
  180.                                <span>{{ Object.values(rows).map(o => o.kg).reduce((sum, val) => sum + val, 0) }}</span>
  181.                            </v-table-cell>
  182.                            <v-table-cell/>
  183.                            <v-table-cell/>
  184.                            <v-table-cell>
  185.                                <span>{{ Object.values(rows).map(o => o.value).reduce((sum, val) => sum + val, 0).toFixed(2) }}</span>
  186.                            </v-table-cell>
  187.                            <v-table-cell/>
  188.                            <v-table-cell/>
  189.                            <v-table-cell/>
  190.                            <v-table-cell>
  191.                                <span>{{ Object.values(rows).map(o => o.fv).reduce((sum, val) => sum + val, 0).toFixed(2) }}</span>
  192.                            </v-table-cell>
  193.                            <v-table-cell/>
  194.                            <v-table-cell/>
  195.                            <v-table-cell/>
  196.                        </v-table-row>
  197.                        <v-table-row v-for='(row, r) in rows' :key='row.id'>
  198.                            <v-table-cell class='display(flex) justify-content(center) align-content(center) align-items(center)'>
  199.                                <a v-tooltip.top='$t("orders.details")' class='fas fa-eye' :href='`/orders/${row.id}`'></a>
  200.                                <a v-tooltip.top='$t("orders.edit")' class='fas fa-pen margin-left(8px)' @click='$refs.form.set(row)'></a>
  201.                                <a v-tooltip.top='$t("orders.remove")' class='fas fa-trash margin-left(8px)' @click='$refs.form.submit(`/api/orders/delete/${row.id}`)'></a>
  202.                            </v-table-cell>
  203.                            <v-table-cell>
  204.                                {{ $t(`orders.status_value[${row.status}]`) }}
  205.                            </v-table-cell>
  206.                            <v-table-cell>
  207.                                {{ row.number }}
  208.                            </v-table-cell>
  209.                            <v-table-cell>
  210.                                {{ row.customer ? `(${row.customer.name_short}) ${row.customer.name}` : '' }}
  211.                            </v-table-cell>
  212.                            <v-table-cell>
  213.                                {{ row.commission }}
  214.                            </v-table-cell>
  215.                            <v-table-cell>
  216.                                <template v-if='row.delivery_address'>
  217.                                    {{ row.delivery_address.combined }}
  218.                                </template>
  219.                            </v-table-cell>
  220.                            <v-table-cell>
  221.                                {{ row.f }}
  222.                            </v-table-cell>
  223.                            <v-table-cell>
  224.                                {{ row.hs }}
  225.                            </v-table-cell>
  226.                            <v-table-cell>
  227.                                {{ row.d }}
  228.                            </v-table-cell>
  229.                            <v-table-cell>
  230.                                {{ row.r }}
  231.                            </v-table-cell>
  232.                            <v-table-cell>
  233.                                {{ $t(`orders.has_addons_value[${row.has_addons}]`) }}
  234.                            </v-table-cell>
  235.                            <v-table-cell>
  236.                                {{ row.kg }}
  237.                            </v-table-cell>
  238.                            <v-table-cell>
  239.                                {{ row.kw }}
  240.                            </v-table-cell>
  241.                            <v-table-cell>
  242.                                {{ row.load_date }}
  243.                            </v-table-cell>
  244.                            <v-table-cell>
  245.                                {{ row.value }}
  246.                            </v-table-cell>
  247.                            <v-table-cell>
  248.                                {{ row.producent }}
  249.                            </v-table-cell>
  250.                            <v-table-cell>
  251.                                {{ row.zd }}
  252.                            </v-table-cell>
  253.                            <v-table-cell>
  254.                                {{ row.notes }}
  255.                            </v-table-cell>
  256.                            <v-table-cell>
  257.                                {{ row.fv }}
  258.                            </v-table-cell>
  259.                            <v-table-cell>
  260.                                {{ row.invoicer }}
  261.                            </v-table-cell>
  262.                            <v-table-cell>
  263.                                {{ row.representant }}
  264.                            </v-table-cell>
  265.                            <v-table-cell>
  266.                                {{ row.provision }}
  267.                            </v-table-cell>
  268.                        </v-table-row>
  269.                    </template>
  270.                    <template #footer>
  271.                        <v-form class='table-crud' ref='form' @on-response='formSubmitted' :validate='formValidate'>
  272.                            <template #inputs='{ inputs }'>
  273.                                <v-table-cell>
  274.                                    <div class="flex-grow(1) display(flex) justify-content(center) align-content(center) align-items(center)">
  275.                                        <template v-if='inputs.id'>
  276.                                            <a v-tooltip:top="$t(`orders.save`)" class="fas fa-save" @click='$refs.form.submit(`/api/orders/update/${inputs.id}`)'></a>
  277.                                            <a v-tooltip:top="$t(`orders.cancel`)" class="fas fa-ban margin-left(8px)" @click='$refs.form.set({})'></a>
  278.                                        </template>
  279.                                        <template v-else>
  280.                                            <a v-tooltip:top="$t(`orders.add`)" class="fas fa-plus" @click='$refs.form.submit("/api/orders/store")'></a>
  281.                                        </template>
  282.                                    </div>
  283.                                </v-table-cell>
  284.                                <v-table-cell/>
  285.                                <v-table-cell>
  286.                                    <div class="display(flex) align-items(center)" v-if='selectedCustomer'>
  287.                                        <span>{{ selectedCustomer.name_short || inputs.number_customer_short }}{{ ('' + (inputs.number_id || selectedCustomer.next_order_number_id)).padStart(4, '0') }}-</span>
  288.                                        <input type='text' maxlength='3' v-model='inputs.number_custom'/>
  289.                                        <span>-{{ currentDateDigits }}</span>
  290.                                    </div>
  291.                                </v-table-cell>
  292.                                <v-table-cell>
  293.                                    <template v-if='!inputs.id'>
  294.                                        <button class='margin-right(8px)' @click.prevent='$modals.newCustomer.open()'>New</button>
  295.                                        <select v-model='inputs.customer_id'>
  296.                                            <option v-for='(customer, c) in customers' :value='customer.id' v-text='customer.name'/>
  297.                                        </select>
  298.                                    </template>
  299.                                </v-table-cell>
  300.                                <v-table-cell>
  301.                                    <div class="flex-grow(1) display(flex) justify-content(center) align-content(center) align-items(center)">
  302.                                        <a v-tooltip.top="$t(`orders.edit`)" class="fas fa-pen" @click='$modals.commission.open()'></a>
  303.                                    </div>
  304.                                </v-table-cell>
  305.                                <v-table-cell>
  306.                                    <template v-if='selectedCustomer'>
  307.                                        <button class='margin-right(8px)' @click.prevent='$modals.newAddress.open({ customer_id: selectedCustomer.id, type: $config.address_types.DELIVERY })'>New</button>
  308.                                        <select v-model='inputs.delivery_address_id'>
  309.                                            <option v-for='(address, a) in selectedCustomer.addresses' :value='address.id' v-text='address.combined'/>
  310.                                        </select>
  311.                                    </template>
  312.                                </v-table-cell>
  313.                                <v-table-cell>
  314.                                    <input type='number' v-model.number='inputs.f'/>
  315.                                </v-table-cell>
  316.                                <v-table-cell>
  317.                                    <input type='number' v-model.number='inputs.hs'/>
  318.                                </v-table-cell>
  319.                                <v-table-cell>
  320.                                    <input type='number' v-model.number='inputs.d'/>
  321.                                </v-table-cell>
  322.                                <v-table-cell>
  323.                                    <input type='number' v-model.number='inputs.r'/>
  324.                                </v-table-cell>
  325.                                <v-table-cell class="display(flex) flex-grow(1) justify-content(center) align-items(center)">
  326.                                    <input type='checkbox' v-model='inputs.has_addons'/>
  327.                                </v-table-cell>
  328.                                <v-table-cell>
  329.                                    <input type='number' v-model.number='inputs.kg'/>
  330.                                </v-table-cell>
  331.                                <v-table-cell>
  332.                                    <input type='number' v-model.number='inputs.kw'/>
  333.                                </v-table-cell>
  334.                                <v-table-cell>
  335.                                    <input type='date' v-model='inputs.load_date'/>
  336.                                </v-table-cell>
  337.                                <v-table-cell>
  338.                                    <input type='number' v-model.number='inputs.value'/>
  339.                                </v-table-cell>
  340.                                <v-table-cell>
  341.                                    <select v-model='inputs.producent'>
  342.                                        <option v-for='(item, i) in $config.producers' :value='item' v-text='item'/>
  343.                                    </select>
  344.                                </v-table-cell>
  345.                                <v-table-cell>
  346.                                    <input type='number' v-model.number='inputs.zd'/>
  347.                                </v-table-cell>
  348.                                <v-table-cell>
  349.                                    <div class="flex-grow(1) display(flex) justify-content(center) align-content(center) align-items(center)">
  350.                                        <a v-tooltip.top="$t(`orders.edit`)" class="fas fa-pen" @click='$modals.notes.open()'></a>
  351.                                    </div>
  352.                                </v-table-cell>
  353.                                <v-table-cell>
  354.                                    <input type='text' v-model='inputs.fv'/>
  355.                                </v-table-cell>
  356.                                <v-table-cell>
  357.                                    <select name='invoicer' v-model='inputs.invoicer'>
  358.                                        <option v-for='(item, i) in $config.order_invoicers' :value='item' v-text='item'/>
  359.                                    </select>
  360.                                </v-table-cell>
  361.                                <v-table-cell>
  362.                                    <input type='text' v-model='inputs.representant'/>
  363.                                </v-table-cell>
  364.                                <v-table-cell>
  365.                                    <input type='number' v-model='inputs.provision'/>
  366.                                </v-table-cell>
  367.                            </template>
  368.                        </v-form>
  369.                    </template>
  370.                </v-table>
  371.            </template>
  372.        </v-panel>
  373.    </fragment>
  374. </template>
  375.  
  376. <script>
  377.    export default
  378.    {
  379.        props: ['orders', 'customers'],
  380.        data: () =>
  381.        ({
  382.            currentDateDigits: new Date().getFullYear().toString().substr(-2),
  383.            currentWeek: new Date().getWeek()
  384.        }),
  385.        methods:
  386.        {
  387.            formValidate(form)
  388.            {
  389.                if(form.inputs.kw)
  390.                {
  391.                    if(((1 > form.inputs.kw) || (53 < form.inputs.kw)) || form.inputs.kw < this.currentWeek)
  392.                        if(!confirm(`${this.$t("orders.kw")} can only be between 1 and 53, aswell as after current week (${this.currentWeek}). Continue regardless?`))
  393.                            return false
  394.                }
  395.  
  396.                if(form.inputs.load_date)
  397.                {
  398.                    var date = new Date(form.inputs.load_date)
  399.                    var currentDate = new Date()
  400.  
  401.                    if(date < currentDate)
  402.                        if(!confirm(`${this.$t("orders.load_date")} cannot be set to date before today. Continue regardless?`))
  403.                            return false
  404.                }
  405.  
  406.                if(form.inputs.zd)
  407.                {
  408.                    if(((1 > form.inputs.zd) || (53 < form.inputs.zd)) || form.inputs.zd < this.currentWeek)
  409.                        if(!confirm(`${this.$t("orders.zd")} can only be between 1 and 53, aswell as after current week (${this.currentWeek}). Continue regardless?`))
  410.                            return false
  411.                }
  412.  
  413.                return true
  414.            },
  415.            formSubmitted(response)
  416.            {
  417.                this.fetch()
  418.            },
  419.            newAddressSubmitted(response)
  420.            {
  421.                this.$modals.newAddress.close(response.data)
  422.  
  423.                this.fetch()
  424.            },
  425.            newCustomerSubmitted(response)
  426.            {
  427.                this.$modals.newCustomer.close(response.data)
  428.  
  429.                this.fetch()
  430.            },
  431.            newCustomerInvoiceAddressSubmitted(response)
  432.            {
  433.                this.$modals.newInvoiceAddress.close(response.data)
  434.  
  435.                this.fetch()
  436.            },
  437.            newCustomerHqAddressSubmitted(response)
  438.            {
  439.                this.$modals.newHqAddress.close(response.data)
  440.  
  441.                this.fetch()
  442.            },
  443.            onNewCustomerSubmit(inputs)
  444.            {
  445.                if(!inputs.separateHqAddress)
  446.                    inputs.headquarters_address_id = inputs.invoice_address_id
  447.            },
  448.            onCloseNewAddress(values)
  449.            {
  450.                this.$refs.form.inputs.delivery_address_id = values.id
  451.            },
  452.            onCloseNewCustomer(values)
  453.            {
  454.                this.$refs.form.inputs.customer_id = values.id
  455.            },
  456.            onCloseNewInvoiceAddress(values)
  457.            {
  458.                this.$refs.newCustomerForm.inputs.invoice_address_id = values.id
  459.            },
  460.            onCloseNewHqAddress(values)
  461.            {
  462.                this.$refs.newCustomerForm.inputs.headquarters_address_id = values.id
  463.            },
  464.            openNewInvoiceAddress()
  465.            {
  466.                this.$modals.newInvoiceAddress.open({ type: this.$config.address_types.INVOICE })
  467.            },
  468.            openNewHeadquartersAddress()
  469.            {
  470.                this.$modals.newHqAddress.open({ type: this.$config.address_types.HEADQUARTERS })
  471.            },
  472.            rowSelected(key)
  473.            {
  474.                this.$emit('on-row-selected', key)
  475.            },
  476.            fetch()
  477.            {
  478.                this.$emit('fetch')
  479.            }
  480.        },
  481.        computed:
  482.        {
  483.            selectedCustomer()
  484.            {
  485.                return this.customers.find(x => x.id == this.$refs.form.inputs.customer_id)
  486.            }
  487.        }
  488.    }
  489. </script>
  490.  
  491. <style lang='scss'>
  492.    .modal
  493.    {
  494.        width: 512px;
  495.  
  496.         > .panel
  497.         {
  498.             flex-grow: 1;
  499.         }
  500.     }
  501. </style>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement