From: Łukasz Rekucki Date: Tue, 8 Sep 2009 16:47:33 +0000 (+0200) Subject: Kilka poprawek w CSS. poprawione przyciski. X-Git-Url: https://git.mdrn.pl/redakcja.git/commitdiff_plain/308aa7c7d75b50a4b36a70681b5e012dbd023c11?ds=inline;hp=--cc Kilka poprawek w CSS. poprawione przyciski. --- 308aa7c7d75b50a4b36a70681b5e012dbd023c11 diff --git a/apps/toolbar/models.py b/apps/toolbar/models.py index 614cfcb0..ae101e07 100644 --- a/apps/toolbar/models.py +++ b/apps/toolbar/models.py @@ -16,7 +16,7 @@ class ButtonGroup(models.Model): class Button(models.Model): label = models.CharField(max_length=32) - slug = models.SlugField() #unused + slug = models.SlugField(unique=True) #unused # behaviour params = models.TextField() # TODO: should be a JSON field @@ -27,8 +27,7 @@ class Button(models.Model): tooltip = models.CharField(blank=True, max_length=120) # Why the button is restricted to have the same position in each group ? - # position = models.IntegerField(default=0) - + # position = models.IntegerField(default=0) group = models.ManyToManyField(ButtonGroup) class Meta: diff --git a/dump_toolbar.sh b/dump_toolbar.sh index 3bac9fe6..796c8c53 100755 --- a/dump_toolbar.sh +++ b/dump_toolbar.sh @@ -1 +1,2 @@ -./project/manage.py dumpdata --format=xml toolbar > fixtures/przyciski.xml +./project/manage.py dumpdata --format=xml toolbar | xmllint --format > +fixtures/przyciski.xml.new diff --git a/fixtures/przyciski.xml b/fixtures/przyciski.xml index d67f3ed0..1794c6d7 100644 --- a/fixtures/przyciski.xml +++ b/fixtures/przyciski.xml @@ -1,98 +1,980 @@ - -Akapity i długie cytatyakapity-i-dlugie-cytaty0Autokorektaautokorekta0Blokibloki0Bloki początkowebloki-poczatkowe0Deklaracjedeklaracje0Dramat wierszowanydramat-wierszowany0Dramat współczesnydramat-wspolczesny0Elementy początkoweelementy-poczatkowe0Masterymastery0Nagłówkinaglowki0Początek dramatupoczatek-dramatu0Poleceniapolecenia0Strukturalnestrukturalne0Style znakowestyle-znakowe0Wersywersy0Widokdisplay_options2A<sup>+</sup>increase_font_size({change: 2})codemirror_fontsize+Zwiększ rozmiar czcionki.A<sup>-</sup>descrease_font_size({change: -2})codemirror_fontsize-Zmniejsz rozmiar czcionki.A<sup>=</sup>reset_font_size({fontSize: 13})codemirror_fontsize=Przywróć orginalny rozmiar czcionki.akapitakapit({tag:"akap"})insert_tagakapit cd.akapit-cd({tag:"akap_cd"})insert_tagakapit dialogowyakapit-dialogowy({tag:"akap_dialog"})insert_tagaktakt({tag:"akt"})insert_tagautorautor({tag:"autor"})insert_tagczęść/księgaczesc({tag:"naglowek_czesc"})insert_tagdedykacjadedykacja({tag:"dedykacja"})insert_tagdedykacjadedykacja({tag:"dedykacja"})insert_tagdidaskaliadidaskalia({tag:"didaskalia"})insert_tagdidaskaliadidaskalia({tag:"didaskalia"})insert_tagdidaskalia wewn.didaskalia-wewn({tag:"didask_tekst"})insert_tagdidaskalia wewn.didaskalia-wewn({tag:"didask_tekst"})insert_tagdramat wiersz.dramat-wiersz({tag:"dramat_wierszowany_l"})insert_tagdramat wiersz./w. łamdramat-wiersz-w-lam({tag:"dramat_wierszowany_lp"})insert_tagdramat współczesnydramat-wspolczesny({tag:"dramat_wspolczesny"})insert_tagdzieło nadrzędnedzielo-nadrzedne({tag:"dzielo_nadrzedne"})insert_tagdługi cyt. poet.dlugi-cyt-poet({tag:"poezja_cyt"})insert_tagdługi cyta. poet.dlugi-cyt-poet({tag:"poezja_cyt"})insert_tagdługi cytatdlugi-cytat({tag:"dlugi_cyt"})insert_tagdługi cytatdlugi-cytatdlugi_cytatinsert_tagekstraekstra({tag:"ekstra"})insert_tagkwestiakwestia({tag:"kwestia"})insert_tagkwestiakwestia({tag:"kwestia"})insert_taglirykaliryka({tag:"liryka_l"})insert_tagliryka/w. łamliryka-w-lam({tag:"liryka_lp"})insert_tagmamtemat.matemat({tag:"mat"})insert_tagmottomotto({tag:"motto"})insert_tagmottomotto({tag:"motto"})insert_tagmotto podpismotto-podpis({tag:"motto_podpis"})insert_tagnagłówek kwestiinaglowek-kwestii({tag:"naglowek_osoba"})insert_tagnotanota({tag:"nota"})insert_tagNovelpagesnovelpages({exprs: [ - - ["\\,\\.\\.|\\.\\,\\.|\\.\\.\\,", "..."], - - ["„", ",,"] /* DOUBLE LOW-9 QUOTATION MARK */ - -]})lineregexpWykonuję operację z novel-pages.opowiadanieopowiadanie({tag:"opowiadanie"})insert_tagosobaosoba({tag:"osoba"})insert_tagosobaosoba({tag:"osoba"})insert_tagpodrozdziałpodrozdzial({tag:"naglowek_podrozdzial"})insert_tagpodtytułpodtytul({tag:"podtytul"})insert_tagpowieśćpowiesc({tag:"powiesc"})insert_tagprzypis autorskiprzypis-autorski({tag:"pa"})insert_tagprzypis edytorskiprzypis-edytorski({tag:"pe"})insert_tagprzypis redaktorskiprzypis-redaktorski({tag:"pr"})insert_tagprzypis tłumaczaprzypis-tlumacza({tag:"pt"})insert_tagrozdziałrozdzial({tag:"naglowek_rozdzial"})insert_tagscenascena({tag:"naglowek_scena"})insert_tagsep. asterykssep-asteryks({tag:"sekcja_asteryks"})insert_tagsep. liniasep-linia({tag:"separator_linia"})insert_tagsep. światłosep-swiatlo({tag:"sekcja_swiatlo"})insert_tagśródtytułsrodtytul({tag:"srodtytul"})insert_tagstrofastrofa({tag"strofa"})insert_tagstrofastrofa({tag:"strofa"})insert_tagsłowo obceslowo-obce({tag:"slowo_obce"})insert_tagtagi głównetagi-glowne({tag:"utwor"})insert_tagtytułtytul({tag:"nazwa_utworu"})insert_tagtytuł dziełatytul-dziela({tag:"tytul_dziela"})insert_tagUsuń spacjęstrip_whitespace({exprs: [ ["^\\s+|\\s+$", ""], ["\\s+", " "] ]})lineregexpUsuwa zbędne spację z dokumentu.uwagauwaga({tag:"uwaga"})insert_tagwers akap.wers-akap({tag:"wers_akap"})insert_tagwers akap.wers-akap({tag:"wers_akap"})insert_tagwers cd.wers-cd({tag:"wers_cd"})insert_tagwers cd.wers-cd({tag:"wers_cd"})insert_tagwers wciętywers-wciety({tag:"wers_wciety"})insert_tagwers wciętywers-wciety({tag:"wers_wciety"})insert_tagwwwwww({tag:"www"})insert_tagwyróżnieniewyroznienie({tag:"wyroznienie"})insert_tagwywiadwywiad({tag:"wywiad"})insert_tagwywiad odpowiedźwywiad-odpowiedz({tag:"wywiad_odp"})insert_tagwywiad pytaniewywiad-pytanie({tag:"wywiad_pyt"})insert_tagZamień dywizzamien_dywiz({exprs:[ ["—","---"] ]})lineregexpZamienia '—' na '---'.zastępnik wersuzastepnik-wersu({tag:"zastepnik_wersu"})insert_tag$.log(editor, panel, params); - - - -var texteditor = panel.texteditor; - -var text = texteditor.selection(); - -texteditor.replaceSelection('<' + params.tag + '>' + text + '</' + params.tag + '>'); - -if (text.length == 0) - -{ - - var pos = texteditor.cursorPosition(); - - texteditor.selectLines(pos.line, pos.character + params.tag.length + 2); - -} - - - -panel.fireEvent('contentChanged');// params: {exprs: list of {expr: "", repl: "" [, opts: "g"]}} -var cm = panel.texteditor; - -var exprs = $.map(params.exprs, function(expr) { - var opts = "g"; - if(expr.length > 2) - opts = expr[2]; - return {rx: new RegExp(expr[0], opts), repl: expr[1]}; -}); - -var selection = cm.selection(); - -if(selection) -{ - var changed = false; - var lines = selection.split('\n'); - var lines = $.map(lines, function(line) { - var old_line = line; - $(exprs).each(function() { - var expr = this; - line = line.replace(expr.rx, expr.repl); - }); - if(old_line != line) changed = true; - return line; - }); - - if(changed) { - cm.replaceSelection( lines.join('\n') ); - panel.fireEvent('contentChanged'); - } -} -else { - var line = cm.firstLine(); - var hasChanges = false; - do { - var content = cm.lineContent(line); - var old_content = content; - $(exprs).each(function() { var expr = this; - content = content.replace(expr.rx, expr.repl); - }); - - if(old_content != content) { - cm.setLineContent(line, content); - hasChanges = true; - } - - line = cm.nextLine(line); - } while( !(line === false) ); - - if(hasChanges) panel.fireEvent('contentChanged'); -}var texteditor = panel.texteditor; - -var frameBody = $('body', $(texteditor.frame).contents()); - - - -if(params.fontSize) { - - frameBody.css('font-size', params.fontSize); - -} - -else { - - var old_size = parseInt(frameBody.css('font-size')); - - frameBody.css('font-size', old_size + (params.change || 0) ); - -} + + + + Akapity i długie cytaty + akapity-i-dlugie-cytaty + 0 + + + Autokorekta + autokorekta + 0 + + + Bloki + bloki + 0 + + + Bloki początkowe + bloki-poczatkowe + 0 + + + Deklaracje + deklaracje + 0 + + + Dramat wierszowany + dramat-wierszowany + 0 + + + Dramat współczesny + dramat-wspolczesny + 0 + + + Elementy początkowe + elementy-poczatkowe + 0 + + + Mastery + mastery + 0 + + + Nagłówki + naglowki + 0 + + + Początek dramatu + poczatek-dramatu + 0 + + + Polecenia + polecenia + 0 + + + Strukturalne + strukturalne + 0 + + + Style znakowe + style-znakowe + 0 + + + Wersy + wersy + 0 + + + Widok + display_options + 2 + + + A<sup>+</sup> + increase_font_size + ({change: 2}) + codemirror_fontsize + + + Zwiększ rozmiar czcionki. + + + + + + A<sup>-</sup> + descrease_font_size + ({change: -2}) + codemirror_fontsize + - + Zmniejsz rozmiar czcionki. + + + + + + A<sup>=</sup> + reset_font_size + ({fontSize: 13}) + codemirror_fontsize + = + Przywróć orginalny rozmiar czcionki. + + + + + + akapit + akapit + ({tag:"akap"}) + insert_tag + + + + + + + + akapit cd. + akapit-cd + ({tag:"akap_cd"}) + insert_tag + + + + + + + + akapit dialogowy + akapit-dialogowy + ({tag:"akap_dialog"}) + insert_tag + + + + + + + + akt + akt + ({tag:"akt"}) + insert_tag + + + + + + + + autor + autor + ({tag:"autor"}) + insert_tag + + + + + + + + część/księga + czesc + ({tag:"naglowek_czesc"}) + insert_tag + + + + + + + + dedykacja + dedykacja + ({tag:"dedykacja"}) + insert_tag + + + + + + + + dedykacja + dedykacja + ({tag:"dedykacja"}) + insert_tag + + + + + + + + didaskalia + didaskalia + ({tag:"didaskalia"}) + insert_tag + + + + + + + + didaskalia + didaskalia + ({tag:"didaskalia"}) + insert_tag + + + + + + + + didaskalia wewn. + didaskalia-wewn + ({tag:"didask_tekst"}) + insert_tag + + + + + + + + didaskalia wewn. + didaskalia-wewn + ({tag:"didask_tekst"}) + insert_tag + + + + + + + + dramat wiersz. + dramat-wiersz + ({tag:"dramat_wierszowany_l"}) + insert_tag + + + + + + + + dramat wiersz./w. łam + dramat-wiersz-w-lam + ({tag:"dramat_wierszowany_lp"}) + insert_tag + + + + + + + + dramat współczesny + dramat-wspolczesny + ({tag:"dramat_wspolczesny"}) + insert_tag + + + + + + + + dzieło nadrzędne + dzielo-nadrzedne + ({tag:"dzielo_nadrzedne"}) + insert_tag + + + + + + + + długi cyt. poet. + dlugi-cyt-poet + ({tag:"poezja_cyt"}) + insert_tag + + + + + + + + długi cyta. poet. + dlugi-cyt-poet + ({tag:"poezja_cyt"}) + insert_tag + + + + + + + + długi cytat + dlugi-cytat + ({tag:"dlugi_cyt"}) + insert_tag + + + + + + + + długi cytat + dlugi-cytat + dlugi_cytat + insert_tag + + + + + + + + ekstra + ekstra + ({tag:"ekstra"}) + insert_tag + + + + + + + + kwestia + kwestia + ({tag:"kwestia"}) + insert_tag + + + + + + + + kwestia + kwestia + ({tag:"kwestia"}) + insert_tag + + + + + + + + liryka + liryka + ({tag:"liryka_l"}) + insert_tag + + + + + + + + liryka/w. łam + liryka-w-lam + ({tag:"liryka_lp"}) + insert_tag + + + + + + + + mamtemat. + matemat + ({tag:"mat"}) + insert_tag + + + + + + + + motto + motto + ({tag:"motto"}) + insert_tag + + + + + + + + motto + motto + ({tag:"motto"}) + insert_tag + + + + + + + + motto podpis + motto-podpis + ({tag:"motto_podpis"}) + insert_tag + + + + + + + + nagłówek kwestii + naglowek-kwestii + ({tag:"naglowek_osoba"}) + insert_tag + + + + + + + + nota + nota + ({tag:"nota"}) + insert_tag + + + + + + + + Novelpages + novelpages + ({exprs: [ + + ["\\,\\.\\.|\\.\\,\\.|\\.\\.\\,", "..."], + + ["„", ",,"] /* DOUBLE LOW-9 QUOTATION MARK */ + +]}) + lineregexp + + Wykonuję operację z novel-pages. + + + + + + opowiadanie + opowiadanie + ({tag:"opowiadanie"}) + insert_tag + + + + + + + + osoba + osoba + ({tag:"osoba"}) + insert_tag + + + + + + + + osoba + osoba + ({tag:"osoba"}) + insert_tag + + + + + + + + podrozdział + podrozdzial + ({tag:"naglowek_podrozdzial"}) + insert_tag + + + + + + + + podtytuł + podtytul + ({tag:"podtytul"}) + insert_tag + + + + + + + + powieść + powiesc + ({tag:"powiesc"}) + insert_tag + + + + + + + + przypis autorski + przypis-autorski + ({tag:"pa"}) + insert_tag + + + + + + + + przypis edytorski + przypis-edytorski + ({tag:"pe"}) + insert_tag + + + + + + + + przypis redaktorski + przypis-redaktorski + ({tag:"pr"}) + insert_tag + + + + + + + + przypis tłumacza + przypis-tlumacza + ({tag:"pt"}) + insert_tag + + + + + + + + rozdział + rozdzial + ({tag:"naglowek_rozdzial"}) + insert_tag + + + + + + + + scena + scena + ({tag:"naglowek_scena"}) + insert_tag + + + + + + + + sep. asteryks + sep-asteryks + ({tag:"sekcja_asteryks"}) + insert_tag + + + + + + + + sep. linia + sep-linia + ({tag:"separator_linia"}) + insert_tag + + + + + + + + sep. światło + sep-swiatlo + ({tag:"sekcja_swiatlo"}) + insert_tag + + + + + + + + śródtytuł + srodtytul + ({tag:"srodtytul"}) + insert_tag + + + + + + + + strofa + strofa + ({tag"strofa"}) + insert_tag + + + + + + + + strofa + strofa + ({tag:"strofa"}) + insert_tag + + + + + + + + słowo obce + slowo-obce + ({tag:"slowo_obce"}) + insert_tag + + + + + + + + tagi główne + tagi-glowne + ({tag:"utwor"}) + insert_tag + + + + + + + + tytuł + tytul + ({tag:"nazwa_utworu"}) + insert_tag + + + + + + + + tytuł dzieła + tytul-dziela + ({tag:"tytul_dziela"}) + insert_tag + + + + + + + + Usuń spację + strip_whitespace + ({exprs: [ ["^\\s+|\\s+$", ""], ["\\s+", " "] ]}) + lineregexp + + Usuwa zbędne spację z dokumentu. + + + + + + uwaga + uwaga + ({tag:"uwaga"}) + insert_tag + + + + + + + + wers akap. + wers-akap + ({tag:"wers_akap"}) + insert_tag + + + + + + + + wers akap. + wers-akap + ({tag:"wers_akap"}) + insert_tag + + + + + + + + wers cd. + wers-cd + ({tag:"wers_cd"}) + insert_tag + + + + + + + + wers cd. + wers-cd + ({tag:"wers_cd"}) + insert_tag + + + + + + + + wers wcięty + wers-wciety + ({tag:"wers_wciety"}) + insert_tag + + + + + + + + wers wcięty + wers-wciety + ({tag:"wers_wciety"}) + insert_tag + + + + + + + + www + www + ({tag:"www"}) + insert_tag + + + + + + + + wyróżnienie + wyroznienie + ({tag:"wyroznienie"}) + insert_tag + + + + + + + + wywiad + wywiad + ({tag:"wywiad"}) + insert_tag + + + + + + + + wywiad odpowiedź + wywiad-odpowiedz + ({tag:"wywiad_odp"}) + insert_tag + + + + + + + + wywiad pytanie + wywiad-pytanie + ({tag:"wywiad_pyt"}) + insert_tag + + + + + + + + Zamień dywiz + zamien_dywiz + ({exprs:[ ["—","---"] ]}) + lineregexp + + Zamienia '—' na '---'. + + + + + + zastępnik wersu + zastepnik-wersu + ({tag:"zastepnik_wersu"}) + insert_tag + + + + + + + + $.log(editor, panel, params); + + + +var texteditor = panel.texteditor; + +var text = texteditor.selection(); + +texteditor.replaceSelection('<' + params.tag + '>' + text + '</' + params.tag + '>'); + +if (text.length == 0) + +{ + + var pos = texteditor.cursorPosition(); + + texteditor.selectLines(pos.line, pos.character + params.tag.length + 2); + +} + + + +panel.fireEvent('contentChanged'); + + + // params: {exprs: list of {expr: "", repl: "" [, opts: "g"]}} +var cm = panel.texteditor; + +var exprs = $.map(params.exprs, function(expr) { + var opts = "g"; + if(expr.length > 2) + opts = expr[2]; + return {rx: new RegExp(expr[0], opts), repl: expr[1]}; +}); + +var selection = cm.selection(); + +if(selection) +{ + var changed = false; + var lines = selection.split('\n'); + var lines = $.map(lines, function(line) { + var old_line = line; + $(exprs).each(function() { + var expr = this; + line = line.replace(expr.rx, expr.repl); + }); + if(old_line != line) changed = true; + return line; + }); + + if(changed) { + cm.replaceSelection( lines.join('\n') ); + panel.fireEvent('contentChanged'); + } +} +else { + var line = cm.firstLine(); + var hasChanges = false; + do { + var content = cm.lineContent(line); + var old_content = content; + $(exprs).each(function() { var expr = this; + content = content.replace(expr.rx, expr.repl); + }); + + if(old_content != content) { + cm.setLineContent(line, content); + hasChanges = true; + } + + line = cm.nextLine(line); + } while( !(line === false) ); + + if(hasChanges) panel.fireEvent('contentChanged'); +} + + + var texteditor = panel.texteditor; + +var frameBody = $('body', $(texteditor.frame).contents()); + + + +if(params.fontSize) { + + frameBody.css('font-size', params.fontSize); + +} + +else { + + var old_size = parseInt(frameBody.css('font-size')); + + frameBody.css('font-size', old_size + (params.change || 0) ); + +} + + diff --git a/project/static/css/master.css b/project/static/css/master.css index 31d811b3..2eaf801e 100644 --- a/project/static/css/master.css +++ b/project/static/css/master.css @@ -9,10 +9,10 @@ body { position: absolute; padding: 0.2em 0.5em; background-color: #CDCDCD; - border-bottom: 0.1px solid black; - height: 1.8em; - line-height: 1.8em; - vertical-align: center; + border-bottom: 0.1px solid black; + height: 1.8em; + line-height: 1.8em; + vertical-align: middle; top: 0px; left: 0px; right: 0px; z-index: 300; @@ -22,12 +22,12 @@ body { } #header-right-toolbar { - position: absolute; - right: 1em; + position: absolute; + right: 1em; } #header button { - vertical-align: center; + vertical-align: middle; } #content { @@ -107,53 +107,53 @@ label { /* ========== */ #panels { - position: absolute; - bottom: 0px; left: 0px; right: 0px; top: 0px; + position: absolute; + bottom: 0px; left: 0px; right: 0px; top: 0px; } .panel-wrap { overflow: hidden; - position: absolute; /* absolute to relation with #panels */ - top: 0px; - bottom: 0px; + position: absolute; /* absolute to relation with #panels */ + top: 0px; + bottom: 0px; } #left-panel-wrap { - left: 0px; - width: 8px; /* initial width */ + left: 0px; + width: 8px; /* initial width */ } #right-panel-wrap { - right: 0px; - width: auto; - left: 8px; /* initial width of the left panel */ + right: 0px; + width: auto; + left: 8px; /* initial width of the left panel */ } /* contents */ .panel-content { - position: absolute; - overflow: auto; - overflow-x: hidden; - top: 22px; left: 0px; bottom:0px; right: 0px; + position: absolute; + overflow: auto; + overflow-x: hidden; + top: 25px; left: 0px; bottom:0px; right: 0px; } .panel-overlay { - position: absolute; - top: 0px; bottom: 0px; left: 0px; right: 0px; - z-index: 100; - background: gray; - opacity: 0.8; - text-align: center; - overflow: hidden; - display: none; - cursor: col-resize; + position: absolute; + top: 0px; bottom: 0px; left: 0px; right: 0px; + z-index: 100; + background: gray; + opacity: 0.8; + text-align: center; + overflow: hidden; + display: none; + cursor: col-resize; } .panel-content-overlay { } .panel-wrap.last-panel .panel-content { - right: 0px; + right: 0px; } .panel-wrap.last-panel .panel-slider { @@ -163,7 +163,7 @@ label { /* Toolbars with select box to change panel contents*/ .panel-toolbar { position: absolute; - top: 0px; left:0px; right: 0px; height: 20px; + top: 0px; left:0px; right: 0px; height: 24px; padding: 0 0 2px 0; /* border-top: 1px solid #AAA; */ @@ -185,7 +185,7 @@ label { /* Slider between panels */ .panel-wrap .panel-slider { position: absolute; - background-color: #DDD; + background-color: #DDD; top: 0px; bottom: 0px; right: 0px; width: 4px; @@ -194,8 +194,8 @@ label { border-top: none; border-bottom: none; - z-index: 90; - cursor: col-resize; + z-index: 90; + cursor: col-resize; } .panel-wrap .panel-slider:hover { @@ -203,7 +203,7 @@ label { } .panel-content-overlay.panel-wrap .panel-slider { - background-color: #DDD; + background-color: #DDD; } @@ -268,16 +268,16 @@ label { } div.isection { - margin: 1em auto; - border: 1px solid black; - padding: 0.5em 2em; - background: #9f9ffa; + margin: 1em auto; + border: 1px solid black; + padding: 0.5em 2em; + background: #9f9ffa; - width: 60%; + width: 60%; } div.isection p { - margin: 0.5em 1em; + margin: 0.5em 1em; } .change-notification { @@ -286,7 +286,7 @@ div.isection p { /* * Popups - */ +*/ #message-box { position: fixed; top: 2px; diff --git a/project/static/css/toolbar.css b/project/static/css/toolbar.css index 71940eb9..f38f4ddb 100644 --- a/project/static/css/toolbar.css +++ b/project/static/css/toolbar.css @@ -25,6 +25,7 @@ border: none; padding: 2pt 0.5em; background: #AAA; + font-family: Sans-Serif; } .toolbar div {