commit b65a56b4d9d980a414bf90df70a1804a6d23f695
parent 3aae8d3f897e1876e6274859074f43e9892ef4aa
Author: David Norton <david@nortoncrew.com>
Date: Tue, 6 Jun 2006 19:53:27 +0000
Fairly major metadatapane reworking. It is now nextdoor to the items list.
- Lots of work to be done. For example, the present way of showing a textbox is sort of a hack - taking a label, assigning certain properties to a textbox, then removing the label and placing the textbox in its place. I will be looking into our options.
- Also, I need to figure out adding/editing/deleting creators.
- When the textbox loses focus, it updates and saves the item (like iCal).
Date: removed Scholare.Date functions, as they are overkill. We can use the built-in Date.toLocaleString()
Diffstat:
7 files changed, 93 insertions(+), 241 deletions(-)
diff --git a/chrome/chromeFiles/content/scholar/itemTreeView.js b/chrome/chromeFiles/content/scholar/itemTreeView.js
@@ -41,11 +41,7 @@ Scholar.ItemTreeView.prototype.getCellText = function(row, column)
if(column.id == 'dateAdded' || column.id == 'dateModified') //this is not so much that we will use this format for date, but a simple template for later revisions.
{
- var myDate = new Date();
-
- myDate.setTime(Date.parse(val.replace("-","/").replace("-","/")));
-
- val = Scholar.Date.formatDate(myDate,'M/d/y h:mma');
+ val = new Date(Date.parse(val.replace(/-/g,"/"))).toLocaleString();
}
return val;
diff --git a/chrome/chromeFiles/content/scholar/metadataPane.js b/chrome/chromeFiles/content/scholar/metadataPane.js
@@ -1,21 +1,17 @@
MetadataPane = new function()
{
var _dynamicFields;
- var _dynamicCreators;
- var _editButton;
- var _cancelButton;
- var _saveButton;
- var _creatorsToolbar;
var _itemBeingEdited;
var _creatorTypes = Scholar.CreatorTypes.getTypes();
this.onLoad = onLoad;
this.viewItem = viewItem;
- this.toggleEdit = toggleEdit;
- this.saveItem = saveItem;
+/* this.saveItem = saveItem;
this.addCreator = addCreator;
- this.removeCreator = removeCreator;
+ this.removeCreator = removeCreator; */
+ this.showEditor = showEditor;
+ this.hideEditor = hideEditor;
function onLoad()
{
@@ -34,33 +30,27 @@ MetadataPane = new function()
* Loads an item
*/
function viewItem(thisItem)
- {
- if(_editButton.hidden)
- toggleEdit(confirm(Scholar.getString('metadata.savechanges').replace('%1',_itemBeingEdited.getField('title'))));
-
+ {
_itemBeingEdited = thisItem;
reloadFields();
-
}
function reloadFields()
{
removeDynamicRows(_dynamicFields);
- removeDynamicRows(_dynamicCreators);
thisItem = _itemBeingEdited;
var fieldNames = getFullFieldList(thisItem);
- var editingMode = _editButton.hidden;
for(var i = 0; i<fieldNames.length; i++)
{
- rowValue = thisItem.getField(fieldNames[i]);
- if(!editingMode || !thisItem.isPrimaryField(fieldNames[i]) || thisItem.isEditableField(fieldNames[i]))
- {
- if(editingMode || rowValue)
- addDynamicField(Scholar.getString("itemFields."+fieldNames[i])+":",rowValue,editingMode ? fieldNames[i] : null);
- }
+ var editable = (!thisItem.isPrimaryField(fieldNames[i]) || thisItem.isEditableField(fieldNames[i]));
+
+ var label = document.createElement("label");
+ label.setAttribute("value",Scholar.getString("itemFields."+fieldNames[i])+":");
+
+ addDynamicRow(label,createValueElement(thisItem.getField(fieldNames[i]), editable ? fieldNames[i] : null));
}
if(thisItem.numCreators() > 0)
@@ -68,39 +58,15 @@ MetadataPane = new function()
for(var i = 0, len=thisItem.numCreators(); i<len; i++)
{
var creator = thisItem.getCreator(i);
- if(editingMode)
- {
- addCreator(creator['firstName'],creator['lastName'],creator['creatorTypeID']);
- }
- else
- {
- addDynamicField(Scholar.getString('creatorTypes.'+Scholar.CreatorTypes.getTypeName(creator['creatorTypeID']))+":",
- creator['firstName']+' '+creator['lastName'],
- false);
- }
+
+ var label = document.createElement("label");
+ label.setAttribute("value",Scholar.getString('creatorTypes.'+Scholar.CreatorTypes.getTypeName(creator['creatorTypeID']))+":");
+
+ addDynamicRow(label, createValueElement(creator['firstName']+' '+creator['lastName'], null), _dynamicFields.firstChild.nextSibling);
}
}
- else if(editingMode)
- {
- //display a empty creator box if editing, and if there are no creators
- addCreator();
- }
}
-
- function toggleEdit(save)
- {
- _cancelButton.hidden = _editButton.hidden;
- _saveButton.hidden = _editButton.hidden;
- _creatorsToolbar.hidden = _editButton.hidden;
-
- _editButton.hidden = !_editButton.hidden;
-
- if(!_editButton.hidden && save)
- saveItem();
-
- reloadFields();
- }
-
+ /*
function saveItem()
{
//get fields, call data access methods
@@ -126,7 +92,7 @@ MetadataPane = new function()
_itemBeingEdited.save();
}
-
+ */
function getFullFieldList(item)
{
var fieldNames = new Array("title","dateAdded","dateModified");
@@ -142,31 +108,29 @@ MetadataPane = new function()
box.removeChild(box.firstChild);
}
- function addDynamicField(labelText, valueText, editable)
- {
- var label = document.createElement("label");
- label.setAttribute("value",labelText);
-
- var valueElement;
- if(editable)
- {
- valueElement = document.createElement("textbox");
- valueElement.setAttribute("value",valueText);
- valueElement.setAttribute("fieldName",editable); //used for identifying the field for saving
- }
- else
- {
- valueElement = document.createElement("label");
- valueElement.appendChild(document.createTextNode(valueText));
- }
-
+ function addDynamicRow(label, value, beforeElement)
+ {
var row = document.createElement("row");
- row.align="center";
row.appendChild(label);
- row.appendChild(valueElement);
- _dynamicFields.appendChild(row);
+ row.appendChild(value);
+ if(beforeElement)
+ _dynamicFields.insertBefore(row, beforeElement);
+ else
+ _dynamicFields.appendChild(row);
}
+ function createValueElement(valueText, fieldName)
+ {
+ var valueElement = document.createElement("label");
+ valueElement.appendChild(document.createTextNode(valueText));
+ if(fieldName)
+ {
+ valueElement.setAttribute('fieldname',fieldName);
+ valueElement.setAttribute('onclick', 'MetadataPane.showEditor(this);');
+ }
+ return valueElement;
+ }
+ /*
function addCreator(firstname, lastname, typeID)
{
if(!lastname)
@@ -218,6 +182,39 @@ MetadataPane = new function()
function removeCreator(row)
{
_dynamicCreators.removeChild(row);
+ }*/
+
+
+ function showEditor(elem)
+ {
+ var t = document.createElement("textbox");
+ t.setAttribute('value',_itemBeingEdited.getField(elem.getAttribute('fieldname')));
+ t.setAttribute('fieldname',elem.getAttribute('fieldname'));
+
+ var box = elem.parentNode;
+ box.removeChild(elem);
+ box.appendChild(t);
+ t.select();
+ t.setAttribute('onblur',"MetadataPane.hideEditor(this);");
+ t.setAttribute('onkeypress','if(event.keyCode == event.DOM_VK_RETURN) document.commandDispatcher.focusedElement.blur()'); //for some reason I can't just say this.blur();
+ }
+
+ function hideEditor(t)
+ {
+ var textbox = t.parentNode.parentNode;
+ var fieldName = textbox.getAttribute('fieldname');
+ var value = t.value;
+ Scholar.debug(value);
+
+ _itemBeingEdited.setField(fieldName,value);
+ _itemBeingEdited.save();
+
+ var elem = createValueElement(value,fieldName);
+
+ var box = textbox.parentNode;
+ box.removeChild(textbox);
+ box.appendChild(elem);
+
}
}
diff --git a/chrome/chromeFiles/content/scholar/metadataPane.xul b/chrome/chromeFiles/content/scholar/metadataPane.xul
@@ -5,7 +5,6 @@
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<script src="metadataPane.js"/>
-
<vbox id="scholar-metadata">
<grid>
<columns>
@@ -16,30 +15,5 @@
<rows id="editpane-dynamic-fields">
</rows>
</grid>
- <toolbar id="metadata-creators-toolbar" hidden="true">
- <label value="&metadata.creators.label;"/>
- <spacer flex="1"/>
- <toolbarbutton label="+" oncommand="MetadataPane.addCreator()" class="addremove"/>
- </toolbar>
- <grid>
- <columns>
- <column flex="1"/>
- <column flex="1"/>
- <column/>
- <column/>
- <column/>
- </columns>
-
- <rows id="editpane-dynamic-creators">
- </rows>
- </grid>
- <spacer flex="1"/>
- <toolbar id="metadata-toolbar">
- <toolbarbutton id="metadata-pane-edit-button" label="&metadata.edit.label;" oncommand="MetadataPane.toggleEdit()"/>
- <toolbarbutton id="metadata-pane-cancel-button" label="&metadata.cancel.label;" oncommand="MetadataPane.toggleEdit()" hidden="true"/>
- <toolbarbutton id="metadata-pane-save-button" label="&metadata.save.label;" oncommand="MetadataPane.toggleEdit(true)" hidden="true"/>
- <spacer flex="1" />
- </toolbar>
</vbox>
-
</overlay>
\ No newline at end of file
diff --git a/chrome/chromeFiles/content/scholar/overlay.js b/chrome/chromeFiles/content/scholar/overlay.js
@@ -19,7 +19,6 @@ var ScholarPane = new function()
this.deleteCollectionSelection = deleteCollectionSelection;
this.renameSelectedCollection = renameSelectedCollection;
this.search = search;
- this.toggleView = toggleView;
/*
* Called when the window is open
@@ -43,8 +42,6 @@ var ScholarPane = new function()
menuitem.setAttribute("oncommand","ScholarPane.newItem("+itemTypes[i]['id']+")");
addMenu.appendChild(menuitem);
}
-
- //Drag.init(document.getElementById('scholar-floater-handle'),document.getElementById('scholar-floater'), 0, 400, 0, 500, true, true);
}
/*
@@ -66,7 +63,6 @@ var ScholarPane = new function()
document.getElementById('scholar-pane').setAttribute('collapsed',!visible);
document.getElementById('scholar-splitter').setAttribute('collapsed',!visible);
- document.getElementById('scholar-floater').hidden = (!visible || itemsView.selection.count != 1);
}
/*
@@ -74,9 +70,8 @@ var ScholarPane = new function()
*/
function newItem(typeID)
{
- document.getElementById('scholar-floater').hidden=false;
MetadataPane.viewItem(new Scholar.Item(typeID));
- MetadataPane.toggleEdit();
+ document.getElementById('scholar-view-item').hidden = false;
}
function newCollection()
@@ -107,23 +102,17 @@ var ScholarPane = new function()
function itemSelected()
{
- var editButton = document.getElementById('metadata-pane-edit-button');
-
if(itemsView && itemsView.selection.count == 1 && itemsView.selection.currentIndex != -1)
{
var item = itemsView._getItemAtRow(itemsView.selection.currentIndex);
MetadataPane.viewItem(item);
- var url = item.getField('source');
- if(!validURL(url))
- url = 'http://www.google.com/search?q='+encodeURIComponent('"'+item.getField("title")+'"'); //+'&btnI'
-
-// document.getElementById('content').loadURI(url);
- document.getElementById('scholar-floater').hidden=false;
+
+ document.getElementById('scholar-view-item').hidden=false;
}
else
{
- document.getElementById('scholar-floater').hidden=true;
+ document.getElementById('scholar-view-item').hidden=true;
}
@@ -152,28 +141,12 @@ var ScholarPane = new function()
collection.ref.rename(newName);
}
}
+
function search()
{
if(itemsView)
itemsView.searchText(document.getElementById('tb-search').value);
}
-
- function toggleView(id)
- {
- var button = document.getElementById('tb-'+id);
- var elem = document.getElementById('scholar-'+id);
-
- button.checked = !button.checked;
- elem.hidden = !elem.hidden;
- }
-
- //Thanks: http://www.bigbold.com/snippets/posts/show/452
- //TODO: move this out of overlay.js, into Scholar.js?
- function validURL(s)
- {
- var regexp = /(http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/
- return regexp.test(s);
- }
}
var ScholarItemsDragObserver =
diff --git a/chrome/chromeFiles/content/scholar/overlay.xul b/chrome/chromeFiles/content/scholar/overlay.xul
@@ -19,26 +19,6 @@
<command id="cmd_scholar_search" oncommand="ScholarPane.search();"/>
</commandset>
- <window id="main-window">
- <vbox id="scholar-floater" hidden="true">
- <vbox id="scholar-metadata">
- <toolbar>
- <label value="&metadata.label;"/>
- <spacer flex="1"/>
- <toolbarbutton class="tabs-closebutton" oncommand="ScholarPane.toggleView('metadata')"/>
- </toolbar>
- </vbox>
- <vbox id="scholar-notes">
- <toolbar>
- <label value="¬es.label;"/>
- <spacer flex="1"/>
- <toolbarbutton class="tabs-closebutton" oncommand="ScholarPane.toggleView('notes')"/>
- </toolbar>
- <textbox multiline="true" flex="1" disabled="true"/>
- </vbox>
- </vbox>
- </window>
-
<vbox id="appcontent">
<hbox id="scholar-pane" position="1" persist="height collapsed">
<vbox persist="width" flex="1">
@@ -69,9 +49,6 @@
</menupopup>
</toolbarbutton>
<spacer flex="1"/>
- <toolbarbutton class="scholar-toggler" id="tb-metadata" label="&toolbar.metadata.label;" checked="true" oncommand="ScholarPane.toggleView('metadata')"/>
- <toolbarbutton class="scholar-toggler" id="tb-notes" label="&toolbar.notes.label;" checked="true" oncommand="ScholarPane.toggleView('notes')"/>
- <spacer flex="1"/>
<label value="&toolbar.search.label;" control="tb-search"/>
<textbox id="tb-search" type="timed" timeout="500" command="cmd_scholar_search"/>
<toolbarbutton class="tabs-closebutton" oncommand="ScholarPane.toggleDisplay()"/>
@@ -117,7 +94,20 @@
<treechildren/>
</tree>
- </vbox>
+ </vbox>
+ <tabbox id="scholar-view-item" hidden="true" flex="2" style="max-width: 300px; min-width: 300px;">
+ <tabs>
+ <tab label="Metadata"/>
+ <tab label="Notes"/>
+ </tabs>
+ <tabpanels flex="1">
+ <vbox id="scholar-metadata">
+ </vbox>
+ <vbox id="scholar-notes">
+ <textbox multiline="true" flex="1" disabled="true"/>
+ </vbox>
+ </tabpanels>
+ </tabbox>
</hbox>
<splitter id="scholar-splitter" resizebefore="closest" resizeafter="closest" position="2" persist="collapsed"/>
</vbox>
diff --git a/chrome/chromeFiles/content/scholar/xpcom/scholar.js b/chrome/chromeFiles/content/scholar/xpcom/scholar.js
@@ -305,24 +305,4 @@ Scholar.Hash.prototype.remove = function(in_key){
Scholar.Hash.prototype.has = function(in_key){
return typeof(this.items[in_key]) != 'undefined';
-}
-
-/*
- * Functions for handling dates
- * Author: Matt Kruse <matt@mattkruse.com>
- * WWW: http://www.mattkruse.com/javascript/date/
- */
-Scholar.Date = new function(){
- this.parseDate = parseDate;
- this.formatDate = formatDate;
-
- var MONTH_NAMES=new Array('January','February','March','April','May','June','July','August','September','October','November','December','Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec');var DAY_NAMES=new Array('Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sun','Mon','Tue','Wed','Thu','Fri','Sat');
- function LZ(x){return(x<0||x>9?"":"0")+x}
- function isDate(val,format){var date=getDateFromFormat(val,format);if(date==0){return false;}return true;}
- function compareDates(date1,dateformat1,date2,dateformat2){var d1=getDateFromFormat(date1,dateformat1);var d2=getDateFromFormat(date2,dateformat2);if(d1==0 || d2==0){return -1;}else if(d1 > d2){return 1;}return 0;}
- function formatDate(date,format){format=format+"";var result="";var i_format=0;var c="";var token="";var y=date.getYear()+"";var M=date.getMonth()+1;var d=date.getDate();var E=date.getDay();var H=date.getHours();var m=date.getMinutes();var s=date.getSeconds();var yyyy,yy,MMM,MM,dd,hh,h,mm,ss,ampm,HH,H,KK,K,kk,k;var value=new Object();if(y.length < 4){y=""+(y-0+1900);}value["y"]=""+y;value["yyyy"]=y;value["yy"]=y.substring(2,4);value["M"]=M;value["MM"]=LZ(M);value["MMM"]=MONTH_NAMES[M-1];value["NNN"]=MONTH_NAMES[M+11];value["d"]=d;value["dd"]=LZ(d);value["E"]=DAY_NAMES[E+7];value["EE"]=DAY_NAMES[E];value["H"]=H;value["HH"]=LZ(H);if(H==0){value["h"]=12;}else if(H>12){value["h"]=H-12;}else{value["h"]=H;}value["hh"]=LZ(value["h"]);if(H>11){value["K"]=H-12;}else{value["K"]=H;}value["k"]=H+1;value["KK"]=LZ(value["K"]);value["kk"]=LZ(value["k"]);if(H > 11){value["a"]="PM";}else{value["a"]="AM";}value["m"]=m;value["mm"]=LZ(m);value["s"]=s;value["ss"]=LZ(s);while(i_format < format.length){c=format.charAt(i_format);token="";while((format.charAt(i_format)==c) &&(i_format < format.length)){token += format.charAt(i_format++);}if(value[token] != null){result=result + value[token];}else{result=result + token;}}return result;}
- function _isInteger(val){var digits="1234567890";for(var i=0;i < val.length;i++){if(digits.indexOf(val.charAt(i))==-1){return false;}}return true;}
- function _getInt(str,i,minlength,maxlength){for(var x=maxlength;x>=minlength;x--){var token=str.substring(i,i+x);if(token.length < minlength){return null;}if(_isInteger(token)){return token;}}return null;}
- function getDateFromFormat(val,format){val=val+"";format=format+"";var i_val=0;var i_format=0;var c="";var token="";var token2="";var x,y;var now=new Date();var year=now.getYear();var month=now.getMonth()+1;var date=1;var hh=now.getHours();var mm=now.getMinutes();var ss=now.getSeconds();var ampm="";while(i_format < format.length){c=format.charAt(i_format);token="";while((format.charAt(i_format)==c) &&(i_format < format.length)){token += format.charAt(i_format++);}if(token=="yyyy" || token=="yy" || token=="y"){if(token=="yyyy"){x=4;y=4;}if(token=="yy"){x=2;y=2;}if(token=="y"){x=2;y=4;}year=_getInt(val,i_val,x,y);if(year==null){return 0;}i_val += year.length;if(year.length==2){if(year > 70){year=1900+(year-0);}else{year=2000+(year-0);}}}else if(token=="MMM"||token=="NNN"){month=0;for(var i=0;i<MONTH_NAMES.length;i++){var month_name=MONTH_NAMES[i];if(val.substring(i_val,i_val+month_name.length).toLowerCase()==month_name.toLowerCase()){if(token=="MMM"||(token=="NNN"&&i>11)){month=i+1;if(month>12){month -= 12;}i_val += month_name.length;break;}}}if((month < 1)||(month>12)){return 0;}}else if(token=="EE"||token=="E"){for(var i=0;i<DAY_NAMES.length;i++){var day_name=DAY_NAMES[i];if(val.substring(i_val,i_val+day_name.length).toLowerCase()==day_name.toLowerCase()){i_val += day_name.length;break;}}}else if(token=="MM"||token=="M"){month=_getInt(val,i_val,token.length,2);if(month==null||(month<1)||(month>12)){return 0;}i_val+=month.length;}else if(token=="dd"||token=="d"){date=_getInt(val,i_val,token.length,2);if(date==null||(date<1)||(date>31)){return 0;}i_val+=date.length;}else if(token=="hh"||token=="h"){hh=_getInt(val,i_val,token.length,2);if(hh==null||(hh<1)||(hh>12)){return 0;}i_val+=hh.length;}else if(token=="HH"||token=="H"){hh=_getInt(val,i_val,token.length,2);if(hh==null||(hh<0)||(hh>23)){return 0;}i_val+=hh.length;}else if(token=="KK"||token=="K"){hh=_getInt(val,i_val,token.length,2);if(hh==null||(hh<0)||(hh>11)){return 0;}i_val+=hh.length;}else if(token=="kk"||token=="k"){hh=_getInt(val,i_val,token.length,2);if(hh==null||(hh<1)||(hh>24)){return 0;}i_val+=hh.length;hh--;}else if(token=="mm"||token=="m"){mm=_getInt(val,i_val,token.length,2);if(mm==null||(mm<0)||(mm>59)){return 0;}i_val+=mm.length;}else if(token=="ss"||token=="s"){ss=_getInt(val,i_val,token.length,2);if(ss==null||(ss<0)||(ss>59)){return 0;}i_val+=ss.length;}else if(token=="a"){if(val.substring(i_val,i_val+2).toLowerCase()=="am"){ampm="AM";}else if(val.substring(i_val,i_val+2).toLowerCase()=="pm"){ampm="PM";}else{return 0;}i_val+=2;}else{if(val.substring(i_val,i_val+token.length)!=token){return 0;}else{i_val+=token.length;}}}if(i_val != val.length){return 0;}if(month==2){if( ((year%4==0)&&(year%100 != 0) ) ||(year%400==0) ){if(date > 29){return 0;}}else{if(date > 28){return 0;}}}if((month==4)||(month==6)||(month==9)||(month==11)){if(date > 30){return 0;}}if(hh<12 && ampm=="PM"){hh=hh-0+12;}else if(hh>11 && ampm=="AM"){hh-=12;}var newdate=new Date(year,month-1,date,hh,mm,ss);return newdate.getTime();}
- function parseDate(val){var preferEuro=(arguments.length==2)?arguments[1]:false;generalFormats=new Array('y-M-d','MMM d, y','MMM d,y','y-MMM-d','d-MMM-y','MMM d');monthFirst=new Array('M/d/y','M-d-y','M.d.y','MMM-d','M/d','M-d');dateFirst =new Array('d/M/y','d-M-y','d.M.y','d-MMM','d/M','d-M');var checkList=new Array('generalFormats',preferEuro?'dateFirst':'monthFirst',preferEuro?'monthFirst':'dateFirst');var d=null;for(var i=0;i<checkList.length;i++){var l=window[checkList[i]];for(var j=0;j<l.length;j++){d=getDateFromFormat(val,l[j]);if(d!=0){return new Date(d);}}}return null;}
-}
+}
+\ No newline at end of file
diff --git a/chrome/chromeFiles/skin/default/scholar/overlay.css b/chrome/chromeFiles/skin/default/scholar/overlay.css
@@ -53,66 +53,7 @@ tree #items-tree
background: #f5f5f5 !important;
}
-#scholar-floater
-{
- position: fixed;
- bottom: 0px;
- right: 0px;
- margin-bottom: 30px;
- margin-right: 30px;
-
- font-size: 12px;
- width: 400px;
- max-width: 400px;
-}
-
-#scholar-floater vbox
-{
- border: 1px solid #a5a5a5;
- background: #f5f5f5;
-
- width: 400px;
- max-width: 400px;
-}
-
-#scholar-floater vbox:first-child
-{
- margin-bottom: 5px;
-}
-
#scholar-metadata
{
-
-}
-
-#metadata-toolbar
-{
- border-bottom: none;
-}
-
-#metadata-toolbar toolbarbutton
-{
- color: blue;
-}
-
-#metadata-toolbar toolbarbutton:hover
-{
- text-decoration: underline;
-}
-
-#scholar-metadata .addremove
-{
- font-weight: bold;
- color: blue;
-}
-
-#scholar-metadata .addremove:hover
-{
- text-decoration: underline;
-}
-
-
-#scholar-notes
-{
- height: 100px;
+ overflow: auto;
}
\ No newline at end of file
